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:

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

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

imports: [
  BrowserAnimationsModule,
],

‍

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

import { NoopAnimationsModule } from '@angular/platform-browser/animations';

imports: [
  NoopAnimationsModule,
],

‍

Theme einbinden

Das Material Design-Paket beinhaltet vier vordefinierte Themes:

‍

‍

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

style.css

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

angular.json

"styles": [
  "src/styles.css",
  "src/MeinEigenesTheme.scss"
],

‍

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.

app.module.ts

import { MatButtonModule, MatCheckboxModule } from '@angular/material';

imports: [
  MatButtonModule,
  MatCheckboxModule,
],

‍

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.

‍