Jetzt anfragenTabellen mit Angular DataTables erstellen und an Prozesse oder Events anpassen.
Tabellenzauber
Aufgabe von Webanwendungen ist es, Informationen und Daten anzuzeigen. Dabei kommen regelmäßig Tabellen zum Einsatz, welche auf den Benutzer zugeschnitten sein müssen. Bei deren Erstellung helfen die Angular DataTables. Sie vereinen das Single Application Framework (SPA) Angular mit DataTables. Der Vorteil für Entwickler: Sie können mit geringem Aufwand Tabellen zur Einsicht, Sortierung, Gruppierung und Filterung von Daten erstellen und darüber hinaus nach Bedarf an Prozesse oder Events anpassen.
Bild: Shutterstock / Botond1977
DataTables einbinden und verwenden
Zunächst geht es darum, wie Sie DataTables in eine vorhandene Angular-4-Struktur einpflegen. Für die Beispielanwendung wird das Angular Command Line Interface (CLI) verwendet. Voraussetzung sind somit die Installation von Node.js (ab Version 8) sowie die Installation von npm in Version 5 oder höher.
Wer sich die DataTables genauer anschauen möchte, sollte ein leeres Projekt mit Angular CLI erstellen. In wenigen Minuten entsteht dabei eine lokal lauffähige Angular-Projektstruktur, anhand derer Sie unterschiedliche Konfigurationen bezüglich Tabellenlayout und Datenquellen testen können.
Der Einsatz von Angular DataTables erfordert grundsätzlich drei Schritte: Zuerst müssen Sie die Abhängigkeiten im Projekt hinterlegen. Das erfolgt komplett über die Konsole oder mithilfe des Tools Ihrer Wahl. Anschließend sind die neuen Abhängigkeiten und Styles innerhalb der Datei angular-cli.json zu deklarieren, sodass Angular die passenden Referenzen einfügen kann. Zuletzt wird das Modul AngularDataTables innerhalb der Moduldeklaration app.module.ts importiert. Um Fehler nach den einzelnen Schritten auszuschließen beziehungsweise einzeln zu adressieren, bietet sich eine Prüfung mit Angular CLI via ng build an.
Abhängigkeiten laden
Zunächst werden gemäß der Anleitung Getting Started, an die sich das Beispielprojekt anlehnt, die Abhängigkeiten über die Konsole geladen. Dazu wechseln Sie ins Root-Verzeichnis des Angular-Projekts und laden die Abhängigkeiten über folgende Eingaben….
