Angular 5: Custom Filter in Angular Material Data-Table

Datum

22.03.2018

Dieser Beitrag wurde verfasst von:

Andy Kurz

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.

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.

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.

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.

HTML Beispiel für ProjectNumber Spalte:

Erfahren Sie mehr

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow
Blog
Blog

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow

Die Power Platform wird aktuell von Microsoft sehr stark gepusht. Zeit, sich mit dem Potenzial der einzelnen Komponenten zu beschäftigen. Heute: Flow.

DevOps und Container
Blog
Blog

DevOps und Container

DevOps an sich ist nicht an eine Technologie gebunden, jedoch haben sich Container-Technologien und DevOps als Verwandte im Geiste gefunden.

PowerApps – Neuigkeiten, Übersicht, Tipps & Tricks
Blog
Blog

PowerApps – Neuigkeiten, Übersicht, Tipps & Tricks

Neues aus der Welt von PowerApps

May
04
novaCapta auf der dotnet Cologne
Event
Event

novaCapta auf der dotnet Cologne

In nächster Nachbarschaft zu unserem Kölner Büro findet am 04. und 05. Mai die dotnet Cologne im KOMED statt. Wir von der novaCapta sind auch dabei.

Office 365 Groups als Evolution von SharePoint?
Blog
Blog

Office 365 Groups als Evolution von SharePoint?

Zusätzlich zu SharePoint erlauben die Office 365 Groups es mir als Anwender, schnell und einfach neue Gruppen anzulegen und selbständig Benutzer hinzuzufügen.

Das neuste Mitglied der Office 365 Familie: Delve
Blog
Blog

Das neuste Mitglied der Office 365 Familie: Delve

Microsoft legt nach: Mit Delve startet eine neue Form des Suchens und des Auffinden von Dokumenten und Informationen.

Azure Functions: Der Webservice ohne Webserver
Blog
Blog

Azure Functions: Der Webservice ohne Webserver

Azure Functions als Authentifizierungs-Helfer für clientseitige Lösungen mit 3rd Party APIs

DevOps und „The Phoenix Project“
Blog
Blog

DevOps und „The Phoenix Project“

Buchvorstellung "Projekt Phoenix: Der Roman über IT und DevOps - Neue Erfolgsstrategien für Ihre Firma" von Gene Kim.

Paket Dependency Manager für .NET
Blog
Blog

Paket Dependency Manager für .NET

Paket ist ein Dependency Manager für .NET, welcher es sich zum Ziel gesetzt hat einige Probleme von NuGet zu beheben.

Sprechen Sie LUIS? – Der intelligente Chat-Bot im Praxistest
Blog
Blog

Sprechen Sie LUIS? – Der intelligente Chat-Bot im Praxistest

Mit LUIS, der Sprach- und Texterkennungssoftware von Microsoft, und dem Bot Framework von Azure haben wir eine Lösung für den IT-Support entwickelt.

Jan
25
Webcast mit Microsoft: Fit für die digitale Arbeitswelt
Webinar
Webinar

Webcast mit Microsoft: Fit für die digitale Arbeitswelt

Die digitale Transformation und die Veränderung der Arbeitswelt ist längst in vielen Unternehmen und in den öffentlichen Einrichtungen angekommen. Dennoch stell...

Theobald Software neuer Partner von novaCapta
News
News

Theobald Software neuer Partner von novaCapta

Komplexe SAP-Prozesse direkt in SharePoint durchführen – dabei unterstützt uns unser neuer Partner Theobald Software.