Angular UI Frameworks und Bibliotheken gibt eine Einführung in die Arbeit mit Angular Material und dem Ionic Framework. Weitere Frameworks und Bibliotheken werden folgen.

1. Angular Material

Das Material Design ist eine eigene Designsprache die von Google entwickelt wurde. Die hier gezeigte Bibliothek Angular Material basiert auf dieser bekannten Designsprache.

In einem existierenden Angular Projekt kannst du Angular Material mit folgendem Befehl installieren

$ ng add @angular/material

In der app.module.ts müssen alle Import der jeweiligen Module importiert werden. Möchtest du zum Beispiel den Button des Angular Materials verwenden, nutzt du den folgenden Import

import {MatButtonModule} from '@angular/material/button';

In der jeweiligen View (z. B. app.component.html) kannst du den Button nun mit dem für die Bibliothek verwendeten Präfix mat anwenden

<button mat-button color="primary">Primary</button>

Alle UI Komponenten des Angular Material werden mit dem führenden mat-Präfix geschrieben. Hier findest du eine vollständige Dokumentation aller Komponenten der Bibliothek.

2. Ionic Framework

Als Open-Source-Webframework ist das Ionic Framework für hybride Apps und Progressive Web Apps bekannt. Ionic wird gerne auch als UI Toolkit bezeichnet und bietet eine Codebasis für alle Plattformen auf HTML, CSS, und JavaScript bzw. TypeScript Basis.

In der Ionic Dokumentation findest du das entsprechende UI Markup zur Integration in Angular, React, JavaScript, Stencil und Vue.

Starten kannst du auch ohne bestehendes Projekt mit einer der oben genannten Web-Frameworks, indem du Ionic per Node Package Manager (NPM) installierst

$ npm install -g @ionic/cli

Mit dem Start-Befehl kannst du eine Ionic App mit einem Standard-Template installieren. In der CLI wird dann der zu verwendende Projektname abgefragt

$ ionic start