Material Design in einer Angular App

Material Design in einer Angular App 

Stefan Jeglorz | Junior Softwareentwickler | 02.04.2020

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 alternative 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 dieses 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 Sie unter: https://material.angular.io/components/categories 

Resümee

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

 

 

Sie suchen einen Software Dienstleister?
Informationen zu unseren Leistungen finden Sie in unserem Portfolio