novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien

Angular 5: Custom Filter in Angular Material Data-Table

In diesem Blogbeitrag will ich euch darlegen, wie man einen Custom Filter für das Angular Material Data-Table Modul erstellt. Denn der Standard Filter besteht aus einem Input, dessen eingegebener Wert über alle Spalten der Tabelle filtert. Somit ist es nicht möglich auf eine bestimmte Spalte zu filtern oder mehrer Filter gleichzeitig zu setzten.

In unserem Fall geht es um eine Angular Component, die eine tabellarische Auflistung alle Projekte zeigt. Außerdem soll nach der Spalte “ProjectNumber” und “Aktiv” gefiltert werden können.

Screenshot Angular Material Data-Table Modul

Aufbau der Component

Zuerst benötigen wir einige Properties, wo Filter, Filter-Values und die Daten gespeichert werden. Im Constructor wird der ProjectService eingeschleust, welcher für das Datenhandling zuständig ist.

Screenshot Code der Properties mit Filter Filter-Values und die Daten sowie Constructor mit ProjectService

In der ngOnInit-Methode holen wir uns alle Projekte. Sobald diese von unserem Service zurück geliefert worden sind, werden sie als neue MatTableDataSource in die “projects” Property geschrieben.

Nun kann mit der eigentlichen Filterfunktionalität begonnen werden. Die MatTableDataSource bringt die Methode “filterPredicate” mit, welche wir überschreiben um dort unsere eigene Filterlogik zu implementieren.

Wird ein Filter gesetzt, so wird für jedes Item die filterPredicate-Methode aufgerufen. Liefert diese Methode true zurück, dann wird der Datensatz angezeigt. In unserem Fall setzen wir anfangs die Variable “show” auf true und durchlaufen dann alle gesetzten Filter welche in der Property “recordFilter” gespeichert sind. Sollte ein Filter beim Durchlauf nicht übereinstimmen wird abgebrochen und false zurück geliefert. Somit wird das Projekt nicht angezeigt.

Sobald sich an einem Filter das Value ändert, wird die Funktion “applyFilter” mit den entsprechenden Parametern aufgerufen.

Screenshot Code ngOnInit-Methode MatTableDataSource mit Methode filterPredicate

Die “applyFilter” Methode kümmert sich um das setzen oder entfernen des Filters und anschließend um das Auslösen der “filterPredicate” Methode. Dies geschieht indem wir einfach einen beliebi

Zu guter Letzt will ich euch natürlich nicht die “generateFilterValues” Methode vorenthalten, welche ebenfalls ausgeführt wird sobald die Daten, von unserem ProjectService, geliefert wurden. Sie kümmert sich darum, dass doppelte Einträge in den Filter-Dropdown´s herausgefiltert werden.

Screenshot Code generateFilterValues Methode

HTML Beispiel für ProjectNumber Spalte:

Screenshot von einem HTML-Code als Beispiel für ProjectNumber Spalte

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up

Blog 28.05.18

Struktureller Aufbau eines Angular Modules

Dieser Blogbeitrag beschäftigt sich mit dem strukturellen Aufbau eines Angular Modules und der Kommunikation der einzelnen Komponenten.

Gemeinsames mobiles arbeiten an Dokumenten

Leistung

Data Protection in der Cloud

Schützen Sie Ihre Daten mit Data Loss Prevention, MS Defender for Cloud Apps oder Customer Key. Alle Produkte funktionieren optimal im Zusammenspiel und schützen Ihre Daten zusätzlich.

News 24.01.24

Atlassian kündigt Preisanpassung für Data Center-Produkte an

Zum 15. Februar 2024 wird Atlassian seine Listen- und Vorteilspreise für Data Center-Produkte erhöhen. Davon betroffen sind Jira Software, Confluence und Jira Service Management. In unserer News haben wir für Sie eine Zusammenfassung der bevorstehenden Preiserhöhung und Ihrer Möglichkeit erstellt, sich noch die aktuellen Preise zu sichern.

Training_Anfrage

Jupyter Notebooks und ETL Prozesse

Im Blogbeitrag beschäftigen wir uns mit möglichen Tools, die für Data Science eingesetzt werden können.

Blog 28.06.18

Angular Route-Guards

Was versteht man eigentlich unter Angular Route-Guards?

Partner

Tealium – Customer Data Hub und Enterprise Tag Management

Sammeln und Verknüpfen von digitalen Daten und somit das Aufbrechen von in sich geschlossenen Datensilos – wir beraten dich zum Einsatz von Tealium.

Leistung

Intranetangebot CUSTOM

CUSTOM ist unsere maßgeschneiderte Lösung für Ihre mittleren bis sehr großen Intranetprojekte, bei denen die Anforderungen komplex oder ggf. noch nicht im Detail definiert sind.

Blog

9 Tipps & Tricks für Angular

Angular ist unter Webentwicklern ein beliebtes Framework für das Programmieren von Web-, Desktop- und mobilen Anwendungen. Neun Tipps & Tricks für Angular-Einsteiger und Profis.

Blog 16.05.24

Angular 18: Das nächste Kapitel

Angular 18 bringt Leistungsverbesserungen, neue Features und Entwicklerwerkzeuge mit sich. Erfahren Sie mehr über Zoneless Angular, verbesserte Bundling-Strategien und Barrierefreiheitsverbesserungen.

Blog 30.10.19

Testen von Angular Anwendungen mit Cypress

Cypress ist ein End-to-End Testing Framework, mit dem man einfache Tests erstellen kann, die in Echtzeit ausgeführt werden. Mit Cypress kann man auch Snapshots von den einzelnen Schritten während der Testausführung sehen. Tests können schnell erstellt werden, ohne dass bestimmte Server oder Driver benötigt werden.

Blog 22.05.25

5 KI-Projekte aus dem Großhandel

In meiner aktuellen Podcast-Folge habe ich mit York Lemb von der Zander-Gruppe über genau das gesprochen: 5 KI-Projekte – alle mit einem Ziel: Zeit sparen, Abläufe verbessern und echten Nutzen.

Service

Customer Experience & Retention

Durch gezielte Retention-Strategien, die auf exzellenter Customer Experience aufbauen, langfristige Kundenbeziehungen fördern.

Blog

Customer IAM mit Azure

Das Customer IAM von Azure ermöglicht die Verwaltung von Identitätsinformationen und die Zugriffsteuerung für verschiedene Kunden-Identitäten.

Blog 06.11.23

Hurra, hurra - Angular Version 17 ist da!

Erfahren Sie, welche aufregenden neuen Funktionen und Verbesserungen Angular Version 17 mit sich bringt. Von der neuen deklarativen Control Flow Syntax bis hin zum Deferred Loading uvm.

Blog 14.03.24

Top 5 Superkräfte der Product Owner

Als Product Owner trägst die Vision deines Produkts wie ein Banner vor dir her und hast die Mission, das bestmögliche Erlebnis und Ergebnis für deine Nutzerer und Nutzerinne zu schaffen.

Wissen 18.11.24

IBM watsonx: 5 überzeugende Argumente

Erfahren Sie, wie IBM watsonx Effizienz steigert, Kosten senkt und Innovation vorantreibt.