Angular. Ferdinand Malcher
Direktiven
Wir haben gelernt, dass wir mit Property und Event Bindings zwischen der Komponente und den DOM-Elementen kommunizieren können. Was allerdings noch fehlt, ist ein Konstrukt, um das Verhalten der Elemente zu steuern. So möchten wir zum Beispiel ein Element nur unter einer Bedingung hinzufügen oder mehrfach wiederholen können.
Hierfür gibt es spezielle HTML-Attribute, die Direktiven genannt werden. Sie geben einem Element zusätzliche Logik, sodass sich das Element anders verhält. Wir unterscheiden dabei zwischen Strukturdirektiven und Attributdirektiven.
Während Attributdirektiven das »innere« Verhalten des Elements steuern, ändern Strukturdirektiven immer die Struktur des DOM-Baums, indem sie Elemente hinzufügen oder entfernen.
*Strukturdirektiven
Strukturdirektiven verändern die Struktur des DOM-Baums.
Mit Strukturdirektiven können wir DOM-Elemente hinzufügen oder entfernen und damit die Struktur des Dokuments verändern. Strukturdirektiven werden immer zusammen mit dem Stern-Zeichen * notiert und als Attribut auf einem DOM-Element eingesetzt. Die Direktive entscheidet dann anhand bestimmter Kriterien, ob und wie das Element in den DOM-Baum eingebaut wird. Die bekanntesten Vertreter der Strukturdirektiven sind ngIf, ngFor und ngSwitch.
ngIf : Bedingungen zum Anzeigen von Elementen
Die Direktive ngIf fügt das betroffene Element nur dann in den DOM-Baum ein, wenn der angegebene Ausdruck wahr ist. Sie kann z. B. eingesetzt werden, um ein Element mit einer Fehlermeldung nur dann anzuzeigen, wenn auch ein Fehler aufgetreten ist.
<div *ngIf="hasError">Fehler aufgetreten</div>
Listing 6–6 ngIf verwenden
Die Direktive verfügt zusätzlich über einen optionalen Else-Zweig. Mehr dazu erfahren Sie unter »Wissenswertes« ab Seite 755.
ngFor : Listen durchlaufen
Mit der Direktive ngFor können wir ein Array durchlaufen und für jedes iterierte Array-Item ein DOM-Element erzeugen. Damit können wir z. B. Tabellenzeilen oder Listen in HTML ausgeben. Im Beispiel durchlaufen wir das Array aus dem Property names aus der aktuellen Komponentenklasse. Das jeweils aktuelle Element ist bei jedem Durchlauf in der lokalen Variable name hinterlegt. Dieser Name ist frei wählbar.
<ul>
<li *ngFor="let name of names">{{ name }}</li>
</ul>
Listing 6–7 ngFor verwenden
Ist das Array names eine Liste mit drei Namen, so erzeugt Angular das folgende Markup:
<ul>
<li>Ferdinand</li>
<li>Danny</li>
<li>Johannes</li>
</ul>
Listing 6–8 Erzeugtes Markup für Listing 6–7
Hilfsvariablen für ngFor
ngFor stellt eine Reihe von Hilfsvariablen zur Verfügung, die wir beim Durchlaufen der Liste verwenden können. Sie beziehen sich jeweils auf das aktuelle Element:
index: Index des aktuellen Elements 0...n
first: true, wenn es das erste Element der Liste ist
last: true, wenn es das letzte Element der Liste ist
even: true, wenn der Index gerade ist
odd: true, wenn der Index ungerade ist
Diese Flags können wir dazu verwenden, um z. B. eine gestreifte Tabelle zu erzeugen oder nach jedem außer dem letzten Element ein Komma auszugeben. Die Variablen müssen vor der Verwendung jeweils auf lokale Variablen gemappt werden, z. B. index as i.
Das folgende Beispiel verwendet index, um vor jedem Namen eine fortlaufende Ziffer anzuzeigen. Die lokale Variable i wird vor der Anzeige jeweils um 1 erhöht, weil die Index-Zählung natürlich bei 0 beginnt.
<ul>
<li *ngFor="let name of names; index as i">
{{ i + 1 }}. {{ name }}
</li>
</ul>
Listing 6–9 ngFor mit Hilfsvariablen
Das Beispiel erzeugt die folgenden DOM-Elemente:
<ul>
<li>1. Ferdinand</li>
<li>2. Danny</li>
<li>3. Johannes</li>
</ul>
Listing 6–10 Erzeugte Ausgabe für Listing 6–9
ngSwitch: Fallunterscheidungen
Eine weitere wichtige Direktive ist ngSwitch. Damit lassen sich im Template Verzweigungen realisieren, wie sie sonst mit switch/case- Anweisungen möglich sind. ngSwitch wird immer zusammen mit zwei weiteren Direktiven eingesetzt: ngSwitchCase und ngSwitchDefault. Damit werden die Zweige für die Fallunterscheidung markiert. Die Direktiven sorgen dafür, dass immer der Zweig angezeigt wird, der dem Eingabewert entspricht.
Im folgenden Beispiel wird innerhalb des <div>-Elements über die Komponenteneigenschaft angularVersion entschieden. Je nachdem, ob der Wert 1 oder 3 ist, wird das zugehörige <span>-Element in den DOM-Baum eingefügt. Wenn keiner der Fälle eintritt, wird das Default-Element ausgewählt.
Das Schlüsselwort ngSwitch wird mit eckigen Klammern angegeben. Das kommt daher, dass ngSwitch tatsächlich eine Attributdirektive ist. Den Unterschied schauen wir uns gleich an.
<div [ngSwitch]="angularVersion">
<span *ngSwitchCase="1">AngularJS</span>
<span *ngSwitchCase="3">Angular 3 existiert nicht</span>
<span *ngSwitchDefault>Angular {{ angularVersion }}</span>
</div>
Listing 6–11 Einsatz von ngSwitch
Wir werden uns in der Iteration V ab Seite 353 noch genauer mit Direktiven auseinandersetzen.
[Attributdirektiven]
Attributdirektiven wirken nur auf das jeweilige Element.
Im Gegensatz zu Strukturdirektiven wirken sich Attributdirektiven nur auf das Element selbst aus, verändern die Position im DOM-Baum aber nicht. Sie ordnen dem Element zusätzliche Logik zu und steuern damit das »innere« Verhalten.
In ihrer Verwendung unterscheiden