01 October, 2021

Angular Referenz

01 October, 2021

Setup

Node

Für die Installation von Angular und weiterer Pakete wird der Node Package Manager (npm) benötigt. Npm wird zusammen mit Node installiert und kann hier runtergeladen werden: Node Download

Nach der Installation kann man die Versionen von Node und npm mit folgenden Befehlen testen

$ node --version
$ npm --version

Angular

Um Angular zu installieren, wechselt man in sein Projektverzeichnis und installiert als erstes Angular zusammen mit der CLI global

$ npm install -g @angular/cli

Mit der Angular CLI kann nun das Projekt aufgesetzt werden.

Für diese Angular Referenz setze ich eine Geo-App ein, die Entfernungen von Städten zueinander anzeigt. Ausgegeben werden die Daten in einer Tabelle in der nach eingegebener Stadt sortiert wird.

$ ng new geoApp

Mit ng new wird ein neues Projekt initialisiert, geoApp ist der selbst gewählte Name der Anwendung.

Bei diesem Schritt wird gleichzeitig ein Git Projekt und Webpack aufgesetzt, sowie viele weitere Pakete, Plugins und kleinere Frameworks.

Referenz

Property-binding

Bei Property-bindings werden Eigenschaften der Komponente in das Markup übergeben. Daten werden immer nur von der Parent zur Child Komponente (von oben nach unten) weitergegeben.

Im folgenden Beispiel wird dem Button das Attribut disabled gesetzt, wenn die Eigenschaft start leer ist.

<button [disabled]="!start">Suche</button>

Two-way-binding

Beim Two-way-binding wird nicht nur der Wert einer Eigenschaft übernommen, der Wert kann z. B. über ein input Formular angepasst und wieder in die Komponente zurückgeschrieben werden.

Im folgenden Beispiel wird der initiale Wert der Eigenschaft start in das input übernommen. Bei Eingabe eines neuen Stadtnamens wird dieser in die Komponente geschrieben und für die Suche verwendet.

<input [(ngModel)]="start" name="start">

Pipes

Mit den Angular Pipes gibt es eine sehr einfache Möglichkeit, die gebundenen Daten zu formatieren. Die Date-Pipe formatiert z. B. ein Datum in ein gewünschtes Format, in diesem Fall DD.MM.YYYY, HH:MM

<td>{{ geo.date | date:'dd.MM.Y, hh:mm'}}</td>

Eine weitere nützliche Pipe ist die Json-Pipe. Damit sind Ausgaben des Objekts in eine Json-Darstellung möglich.

<td>{{ geo | json }}</td>

Weitere Pipes sind in der Angular Dokumentation zu finden.

Direktiven

© Digitale Rundschau - Powered by Weblokal Developement.