Material Design in einer Angular App
Stefan Jeglorz | Junior Softwareentwickler | 02.04.2020
Material Design | Praxisbeispiel in einer Angular Applikation
Angular Material ist eine umfangreiche Sammlung aus UI Komponenten für Angular. Die Komponenten werden über ein Theme gestylt. Dies bietet dem Entwickler die Möglichkeit, das Styling der Angular Anwendung mit wenigen Zeilen Code zu ändern.
Pakete installieren
Um Material Design für 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 „BrowserAnimationModule“ in den „app.modules.ts“ eingebunden werden. Dazu wird das „BrowserAnimationModule“ importiert und unter den Imports angemeldet.
app.module.ts
Import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
imports: [
BrowserAnimationsModule,
],
Sind die Animationen der Material Design Komponenten nicht gewünscht importieren Sie das „NoopAnimationModule“.
@import { NoopAnimationModule } from '@angular/platform-browser/animations';
imports: [
NoopAnimationModule,
],
Theme einbinden
Das Material Design Paket beinhaltet 4 vordefinierte Themen:
Nach der Auswahl eines passenden Themes wird dieser nun im „style.css“ eingebunden.
style.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Nutzten Sie die Möglichkeit der Material Komponenten ein eigenes Theme zu entwerfen, kann dieses auch alternativ in der „angular.json“ unter dem Abschnitt „styles“ eingebunden werden.
angular.json
"styles": [
"src/styles.css",
"src/MeinEigenesTheme.scss"
],
UI Komponenten einbinden und verwenden
Zur Demonstration wird als Beispiel der Button und die Checkbox der Material Design Komponenten verwendet, da diese unterschiedliche Schreibweisen im Html verwenden.
Um die UI Komponenten des Material Design für Angular nun zu verwenden, müssen Sie die gewünschten Module in den „app.module.ts“ importieren und einbinden.
app.module.ts
Import { MatButtonModule, MatCheckboxModule} from '@angular/material';
imports: [ MatButtonModule,
MatCheckboxModule
],
HTML Darstellung – Button
<button mat-button Color="primary"> MeinButton </button>
HTML Darstellung – Checkbox
<mat-checkbox>Meine Checkbox</mat-checkbox>
Weitere Informationen zu den einzelnen Komponenten finden sich unter: https://material.angular.io/components/categories
Die Material Design Komponenten für Angular bieten eine Menge Möglichkeiten für die Gestaltung der Benutzeroberflächen und sind sehr gut für Angular Anwendungen angepasst. Durch die Material Design Komponenten haben Entwickler die Möglichkeit die Oberfläche passend an dessen Benutzer anzupassen.
Stefan Jeglorz | Junior Softwareentwickler | 02.04.2020