Angular Material Design | UI Component Library Guide

Angular Material Design: UI-Komponenten nach Google Design-Richtlinien

Stefan J. | Junior Softwareentwickler

04/2020

Fachartikel

Material Design | Praxisbeispiel in einer Angular-Applikation

Angular Material ist eine umfangreiche Sammlung von UI-Komponenten für Angular. Die Komponenten werden über ein Theme gestylt, was dem Entwickler die Möglichkeit bietet, das Styling der Angular-Anwendung mit wenigen Zeilen Code zu ändern.

‍

Pakete installieren

Um Material Design in Angular zu verwenden, müssen folgende Pakete installiert werden:

Angular Material
Angular CDK
Angular Animations

Diese werden über NPM mit dem folgenden Befehl installiert:

1npm install --save @angular/material @angular/cdk @angular/animations

Animationen

Um die Animationen der Material Design-Komponenten zu verwenden, muss das BrowserAnimationsModule in der Datei app.module.ts eingebunden werden. Dazu wird das BrowserAnimationsModule importiert und unter den Imports registriert.

1app.module.ts
2
3import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4
5imports: [
6  BrowserAnimationsModule,
7],

Falls die Animationen der Material Design-Komponenten nicht gewünscht sind, importieren Sie stattdessen das NoopAnimationsModule.

1import { NoopAnimationsModule } from '@angular/platform-browser/animations';
2
3imports: [
4  NoopAnimationsModule,
5],

Theme einbinden

Das Material Design-Paket beinhaltet vier vordefinierte Themes:

‍

Tabelle mit vier Angular-Material-Themes und den zugehörigen CSS-Pfaden, z. B. indigo-pink.css

‍

Nach Auswahl eines passenden Themes wird dieses in der Datei style.css eingebunden.

1style.css
2
3@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Sollten Sie ein eigenes Theme für die Material-Komponenten entwerfen, kann dieses alternativ in der Datei angular.json unter dem Abschnitt „styles“ eingebunden werden.

1angular.json
2
3"styles": [
4  "src/styles.css",
5  "src/MeinEigenesTheme.scss"
6],

‍

UI-Komponenten einbinden und verwenden

Zur Demonstration werden der Button und die Checkbox der Material Design-Komponenten verwendet, da diese unterschiedliche Schreibweisen im HTML aufweisen.

Um die UI-Komponenten von Material Design für Angular zu verwenden, müssen die gewünschten Module in der Datei app.module.ts importiert und eingebunden werden.

1app.module.ts
2
3import { MatButtonModule, MatCheckboxModule } from '@angular/material';
4
5imports: [
6  MatButtonModule,
7  MatCheckboxModule,
8],

‍

HTML-Darstellung – Button

<button mat-button color="primary">Mein Button</button>

HTML-Darstellung – Checkbox

<mat-checkbox>Meine Checkbox</mat-checkbox>

‍

Weitere Informationen zu den einzelnen Komponenten finden Sie unter: Material Design Components.

Die Material Design-Komponenten für Angular bieten zahlreiche Möglichkeiten zur Gestaltung von Benutzeroberflächen und sind optimal an Angular-Anwendungen angepasst. Entwickler können damit die Oberfläche optimal auf die Bedürfnisse der Benutzer abstimmen.

‍