Angular Material

Modernes Design für Angular Anwendungen

Angular Material ist eine "Benutzeroberflächenkomponentenbibliothek" für Angular Entwickler, also ein Frontend Framework ausgehend von Material Design. Dabei handelt es sich um eine Designsprache, die von Google Inc. entwickelt wurde und ständig weiterentwickelt wird. Durch eine Vielzahl bereitgestellter Komponenten können moderne, einheitliche und funktionaleBenutzeroberflächen in kurzer Zeit erstellt werden.

Angular Material installieren

Um Angular Material benutzen zu können benötigst du zunächst eine Angular Anwendungen. Wie das funktioniert erfährst du hier. Im Anschluss daran kannst du Angular Material wie folgt einer bestehenden Angular Anwendung hinzufügen:

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“ kannst du 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.

first angular application (localhost:4200)

Angular Material Website — Angular Material - Website

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.

Angular Material - home component typescript

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.