Code&Dragons

Angular Setup + Material & Bootstrap

Lesedauer 2 Minuten

Ein neu aufgesetztes Angular Projekt bietet einen guten Startpunkt für eine große Breite an Anwendungen. Damit einher geht, dass der letzte Schritt, um ein Projekt zu beginnen, mit ein wenig Arbeit verbunden ist. In diesem Beitrag soll einer von vielen Varianten vorgestellt werden, um die Grundlage für eine Mobile-First Web-Anwendung zu schaffen.

Folgende Themen werden behandelt:

  • Angular CLI (v12.2.2)
  • Angular Material (v13.0.0)
  • Bootstrap (v5.1)

Im Anschluss verlinke ich noch einige Verweise auf weitere Artikel (meist englischsprachig), welche zusätzliche Informationen liefern.

Angular

Falls noch nicht passiert, installieren wir das Angular Command-Line-Interface (Was ist ein CLI?).

npm install -g @angular/cli

Anschließend zu dem Ordner navigieren, in welchem das Projekt erstellt werden soll. Mit dem folgenden Befehl erstellen wir ein neues Projekt mit dem aussagekräftigen Namen my-app. 

ng new my-app

Falls Intellij IDEA oder Webstorm für das Setup verwendet werden, muss darauf geachtet werden, dass die Checkmark use default project setup bei dem Erstellen des Projekts deaktiviert ist. Während der Installation müssen mehrere Entscheidungen getroffen werden:

  • Would you like to add Angular routing? => Y
  • Which stylesheet format would you like to use? => SCSS

Nach diesem Schritt sollte das grundlegende Angular-Projekt initialisiert sein.

Angular Material

Der nächste Schritt ist das Installieren von Angular Material. Das UI-Framework wird uns eine Reihe von nützlichen Komponenten geben und das CDK, um programmatisch Informationen aus Komponenten zu extrahieren.

ng add @angular/material

Auch hier erwarten uns eine Reihe von Entscheidungen:

  • Would you like to proceed? => Y
  • Choose a prebuilt theme name, or "custom" for a custom theme: => Indigo/Pink
  • Set up global Angular Material typography styles? => Y
  • Set up browser animations for Angular Material? => Y

Nach diesem Schritt sollte Angular Material dem Projekt hinzugefügt worden sein. Überprüfen lässt sich das anhand der package.json. Dort müsste unter dependencies folgender Eintrag zu finden sein:

"@angular/material": "^12.2.2"

Als nächstes werden wir uns um das Hinzufügen von Bootstrap kümmern.

Bootstrap

Angular Material besitzt eine Vielzahl an Komponenten, welche sich qualitativ und was die Möglichkeiten zur Modifizierung angeht, von den von Bootstrap zur Verfügung gestellten Komponenten, abhebt. Außerdem wird Angular Material, wie der Name vermuten lässt, im Einklang von Angular selbst entwickelt und dem entsprechend abgestimmt. Warum also Bootstrap?

Angular Material mangelt es an Utility-, einem Responsive- und Reboot-System. Bootstrap liefer sowohl Utility als auch ein Grid-System und den Reboot.

  • Utility: Liefert uns die Möglichkeit einzelne CSS-Attribute mit einer Klasse hinzuzufügen. Statt einem display: flex; flex-direction: row; justify-content: center;, in einer eigens dafür erstellten CSS-Klasse, kann nun im HTML-Element class="d-flex flex-row justify-content-center" geschrieben werden. Das hat zum Vorteil, das CSS-Klassen weitaus öfter benutzt werden und führt damit zu einer konsistenteren Struktur der Anwendung.
  • Grid-System: Liefert die Funktionalitäten um den Mobile-First-Ansatz umzusetzen. Mit dem Grid-System lässt sich mit wenig Aufwand eine responsive Anwendung erstellen.
  • Reboot: Jedes Gerät oder auch jeder Browser haben Eigenarten, welche sonst vom Entwickler oder der Entwicklerin ausgeglichen werden müssen. Das Reboot-System sorgt dafür, dass alle unsere CSS-Klassen auf allen Geräten sich gleich verhalten.

Doch Bootstrap liefert auch die eigenen Komponenten. Das Ziel ist es, die Utility- und Grid-Funktionalität zu importieren, aber nicht die Komponenten, welche die Komponenten von Angular Material behindern könnten. Zunächst installieren wir, wie gewohnt, Bootstrap.

npm install bootstrap

Anschließend gehen wir zu src/styles.scss und importieren die gewünschten Systeme von Bootstrap.

@import "~bootstrap/dist/css/bootstrap-grid.css";
@import "~bootstrap/dist/css/bootstrap-reboot.css";
@import "~bootstrap/dist/css/bootstrap-utilities.css";

Nun sind sämtliche CSS-Funktionalitäten dieser drei Systeme in der Anwendung verfügbar.

Weiterführend

Angular – Setting up the local environment and workspace

Angular Material UI component library

Introduction – Bootstrap v5.1

Bildnachweis: Unsplash.