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

novaCapta auf der Fachtagung für Interne Revision
Event
Event

novaCapta auf der Fachtagung für Interne Revision

Das Expertenteam der novaCapta präsentiert am 15. und 16. November ihre innovative Audit Management Lösung auf dem DIIR-Kongress in Dresden. Besuchen Sie unsere...

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...

Valo ist neuer Partner der novaCapta für Intranets
News
News

Valo ist neuer Partner der novaCapta für Intranets

Durch die Partnerschaft mit Valo, dem Ready-2-Go Intranet-Baukasten aus Finnland baut die novaCapta ihr Angebot bei der Umsetzung von schnellen und funktionalen...

SharePoint Framework Client-Side Webparts mit React
Blog
Blog

SharePoint Framework Client-Side Webparts mit React

React ist ein Framework zur Erstellen von Benutzeroberflächen. In der SharePoint Online Entwicklung bietet es sich für die Entwicklung von Client-Side Webparts...

Sliding to heaven – A short story of a SPFx Slider Webpart
Blog
Blog

Sliding to heaven – A short story of a SPFx Slider Webpart

SharePoint Framework, kurz SPFx, ist eine zukunftsträchtige Technologie zur Erstellung von Webparts oder Extensions auf der Basis von TypeScript.

SharePoint Hosted Add-in mit AngularJS 2
Blog
Blog

SharePoint Hosted Add-in mit AngularJS 2

Voraussetzungen und Umsetzung eines SharePoint Hosted Add-in mit AngularJS 2.

Bundesliga-Tippspiel

Bundesliga-Tippspiel

Fußball ist in Ihrem Unternehmen jeden Montag Gesprächsthema Nummer eins? Dann holen Sie sich die Fußball Bundesliga in Ihr Intranet!

novaBirthday

novaBirthday

novaBirthday erweitert Ihr SharePoint-Intranet um ein soziales Feature und kann damit die Akzeptanz und Reichweite verbessern.

Junge mit rotem Herz aus Filz in der Hand als Symbol der Nächstenliebe
Referenz: Caritasverband Köln

Referenz: Caritasverband Köln

Dem hohen Anspruch an das Qualitätsmanagement wurde nun mit einer neuen SharePoint 2013 basierten Lösung der novaCapta Rechnung getragen.

PayPal-Zahlung in einer MVC Anwendung
Blog
Blog

PayPal-Zahlung in einer MVC Anwendung

In diesem Blogbeitrag möchte ich demonstrieren, wie eine Einbindung von PayPal in eine MVC Applikation funktioniert.

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.

End of Life – Eine Applikation wird abgelöst
Blog
Blog

End of Life – Eine Applikation wird abgelöst

Die Stilllegung einer Applikation im Application Lifecycle Management nicht beachtet. Dennoch sollten sie in einem ganzheitlichen Ansatz beachtet werden.