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

Screenshot Code applyFilter Methode

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.

Blue sky and clouds
Blog 28.06.18

Angular Route-Guards

Was versteht man eigentlich unter Angular Route-Guards?

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
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.

Bild einer Farbmuster-Karte
Referenz

Muster-Straub: Webshop mit SharePoint-Integration

Um Bestellungen und Versand effizienter und einfacher zu gestalten entwickelte novaCapta für das Unternehmen eine ganzheitliche Webshop-Lösung mit Hilfe des ASP.NET MVC-Frameworks.

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

Siemens AG: SharePoint statt Excel bei komplexen Formularen

Siemens ersetzt komplexe Excel-Tabellen für die Verwaltung und Auswertung der Projekt- und Arbeitsstunden durch intuitive SharePoint-Anwendung – für mehr Übersicht und einfache Bedienung.

Online survey filling out and digital form checklist by laptop computer, Document Management Checking System, online documentation database and process manage files
Referenz

Siemens AG: Steuerung von Zulassungsverfahren per SharePoint

Auf Basis von JavaScript & Microsoft SharePoint entwickelte novaCapa für Siemens eine webbasierte Anwendung, über die das Zulassungsverfahren von medizinischen Geräten effizient gesteuert werden kann.

Close up of female hands while typing on laptop
Blog 08.11.16

Was ist Application Lifecycle Management (ALM)?

Application Lifecycle Management beschreibt einen ganzheitlichen Ansatz, der eine Anwendung während allen Phasen der Software begleitet.

Blue sky and clouds
Blog 04.06.14

Hat Ihr Unternehmen einen Informations-Lebenszyklus?

Jede Information hat eine Aktualitätsphase, eine Nachschlag-Phase, eine Archiv-Phase und einen Obsoleszenz-Punkt. Steuern Sie den Lebenszyklus Ihrer Informationen?

Team of programmers working in office
Blog 26.08.21

Was Sie beim nächsten IT-Projekt beachten sollten

Unternehmen sind in ihrer digitalen Transformation erfolgreicher, wenn sie bei der Umsetzung auf ein wirksames Change Management setzen. Wie der Wandel gelingt, verrät Nora Sommer, Senior Business Consultant bei der novaCapta, im Interview.

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 14.06.16

Was kann der neue Office 365 Planner – und was kann er nicht

„Office 365 Planner“ ist das neue Tool von Microsoft, mit dem sich Zusammenarbeit und Aufgabenverteilung in Teams organisieren lässt. Was kann der neue Office 365 Planner – und was kann er nicht

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

Fünf Tipps für mehr SharePoint-Adoption in Unternehmen

SharePoint ist eine vielseitige und mächtige technologische Plattform mit vielen Funktionen. Unseren fünf Expertentipps erhöhen die Adoption.

Close up of female hands while typing on laptop
Blog 20.11.18

SharePoint Framework Client-Side Webparts mit React

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

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 10.02.16

Produktiver lernen mit SharePoint

Bringt die aktuelle Version der SharePoint-Plattform so viele neue Features mit, es zu einem perfekten Learning Management System zu machen? Wir beleuchten es.

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

Spaltenformatierung in SharePoint: Column formatting vs. JS

Eine Gegenüberstellung der Spaltenformatierung von JSLink zu der neueren Methode Column formating in Office 365.

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 08.07.15

Change Management in IT-Projekten

Viele IT-Projekte scheitern am Zusammenspiel verschiedener Faktoren, wie unklare Ziele, ungenügende Ressourcen, schlechte Kommunikation und fehlende User-Akzeptanz.

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 21.01.16

Fünf Tipps für eine verbesserte Software-Adoption

Die Generation Y stellt im Arbeitsumfeld neue Anforderungen an Unternehmens-Software und -Systeme. Unsere fünf Tipps, um die Adoption einer Software erhöhen.

Blue sky and clouds
Blog 12.08.14

Farben zur Optimierung des SharePoint-Kalender

Auch in SharePoint kann man Kategorien für Teamkalender-Einträge farblich abheben und damit die Lesbarkeit erhöhen. Wir zeigen Ihnen, wie das geht.

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

Drei Tipps für mehr SharePoint-Begeisterung

Wir geben Tipps zur der Microsoft Serverplattform für Content Management, (Social)-Collaboration, Portalfunktion, Business Intelligence und Enterprise Search.

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 20.12.18

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.

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

Nutzung der SharePoint REST API mit Microsoft Flow

Durch Zugriffe über die REST API lassen sich viele Vorgänge mit Microsoft Flow automatisieren.