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.

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.

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
Blog 13.05.14

SharePoint und Informationsarchitektur – worauf kommt es an?

Wie definiert sich eine Informationsarchitektur und die Rolle eines Informationsarchitekten im SharePoint-Umfeld?

Drei Personen in einer Besprechung an einem Tisch besprechen den Zeitplan auf ihrem Microsoft-Laptop
Blog 17.07.19

Die Bedeutung einer Governance

In der Governance-Struktur legen Sie fest, wie Sie mit Ihrer SharePoint-Umgebung arbeiten. Governance beschreibt die Rollen der Nutzer und legt Verantwortlichkeiten fest.

Blue sky and clouds
Blog 31.01.18

Grundlagen der Datenmodellierung

Fachliches Modell mit ER-Diagrammen (auch ERM – Entity Relationship Model)

News der novaCapta
Blog 19.09.17

Der wiederholte Bereich in Nintex Forms

Nintex für Fortgeschrittene

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

Migration IBM Lotus Notes zu Microsoft SharePoint

Eine Migration von Lotus Notes/Domino nach SharePoint/Exchange besteht grundsätzlich aus mindestens zwei Bereichen.

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

Braucht man wirklich jQuery?

Ich beleuchte diese Frage anhand von Beispielen aus der Praxis und hinterfrage, ob in der modernen Browserlandschaft auch natives JavaScript ausreicht.

Blue sky and clouds
Blog 09.12.15

Vorgesetzte in Nintex per LDAP-Abfrage ermitteln

"Meine Sekretärin erledigt das für mich." Es ist der Klassiker der Workflows: Die Genehmigung. Neu im novaCapta Blog ► Mit Nintex Vorgesetzte per LDAP-Abfrage ermitteln ✓ So funktioniert's ✓ Jetzt nachlesen!

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

CQRS in ASP.Net MVC mit Entity Framework

Die Entwicklung von Anwendungen in einem mehrschichtigen Aufbau hat sich etabliert. Design Patterns wie MVC schaffen Lösungen.

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

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 3

Dieser Teil der Artikelserie befasst sich mit der RMS-Freigabeanwendung, welche Dateien jeglichen Dateityps verschlüsseln kann.

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 08.07.15

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 2

Dieser Teil der Artikelserie befasst sich mit der Anwendung von den Microsoft RMS in der Praxis.

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 30.06.15

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 1

Diese Artikelserie befasst sich mit der Einrichtung und Verwendung der Rights Management Services (RMS) von Microsoft, die eine sichere Verschlüsselung von Dateien bieten.

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

Warum ist Inline-CSS und JavaScript-Code so schlecht?

Warum der Einsatz von Inline-CSS bzw. JavaScript-Code schlecht ist, da Dinge wie Caching, DRY-Prinzip, Wartbarkeit und Media-Queries gänzlich außer Acht gelassen werden.

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 17.12.14

Multi Factor Authentication (Azure und SharePoint)

Microsoft führt mit der Multi Faktor Authentisierung (MFA) eine weitere und kostenlose Authentifizierungsebene zu in Office 365 hinzu.

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 15.10.19

GraphQL – Die Alternative zu REST

GraphQL ist eine Abfragesprache für APIs zur Ausführung von Abfragen mit Hilfe eines für die Daten definierten Typensystems. In dieser kleinen Blog-Serie schauen wir uns einfache Queries und Mutations an.