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:

‍

‍

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

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

‍

HTML-Darstellung – Checkbox

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

‍