Angular Material - Modernes Design für Angular Anwendungen

Angular Material ist eine "Benutzeroberflächenkomponentenbibliothek" für Angular Entwickler, also sozusagen ein Frontend Framework.

Angular Material installieren

ng add @angular/material

Angular Material bietet bei der Installation einige vordefinierte Themes an. Diese können später angepasst werden. Es gibt auch die Möglichkeit eigene individuelle Themes zu erstellen. Dazu später mehr, zu Beginn genügt es ein vorgefertigtes Theme zu benutzen.

Die Einrichtung von „HammerJS“ und den „browser animations“ können Sie mit Ja bestätigen.

Die Anwendung startet mit der Standard-Komponente app-root. Um den Code übersichtlich zu gestalten, arbeiten wir mit einzelnen Komponenten, die bestimmte Bereiche einer Anwendung repräsentieren.

Neue Komponente erstellen

ng generate component home

Als erstes öffnest du die Datei app.component.html, löscht dort den vordefinierten Code und rufst stattdessen die neu erstellte Komponente app-home auf. In der TypeScript Datei der jeweiligen Komponente findest du unter selector den Namen, über welche sie aufgerufen werden kann.

Die Komponente app-home kann nun folgendermaßen in der Komponente app-root aufgerufen werden.

Werfen wir einen Blick auf die Anwendung sehen wir, dass der Aufruf der Komponente app-home funktioniert.

Passen wir nun die home Komponente mit Hilfe von Angular Material an. Die offizielle Webseite lautet https://material.angular.io/. Unter Components findest du alle verfügbaren Komponenten, die du in deine Anwendung einbauen kannst.

Die Vorgehensweise ist fast immer identisch. Du suchst auf der Webseite nach der gewünschten Komponente, z.B. nach einer Tabelle, kopierst den Code eines Beispiels und passt ihn anschließend an.

Angular Material Tabelle

Wähle im Menü links den Reiter Table aus und kopiere den Code in deine Anwendung.

Nachdem du eine neue Material Komponente in der Anwendung eingebaut hast, müssen alle benötigten Module geladen werden. Hierfür navigierst du auf der Angular Material Webseite unter der jeweiligen Komponente zu API. Diesen import benötigt die Material Komponente, um auf vordefinierte Elemente und Funktionen zuzugreifen.

Die Module werden in der Datei app.module.ts importiert.

Schauen wir uns unsere Anwendung über localhost:4200 an, sehen wir, dass das Navigieren zur Home Komponente funktioniert und die Material Tabelle korrekt dargestellt wird.