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 sich Attributdirektiven nicht von Property Bindings, denn die werden in der Regel mit eckigen Klammern angegeben. Angular weiß, ob es sich um ein Property Binding oder eine Direktive handelt, und verarbeitet den Ausdruck entsprechend.
Bekannte Vertreter sind ngSwitch, ngClass, ngStyle, routerLink und routerLinkActive. Auf ngClass und ngStyle gehen wir auf den Seiten 107 und 108 noch gezielter ein, wenn wir über Class und Style Bindings sprechen. Im Kapitel zu Routing ab Seite 147 lernen wir schließlich auch den routerLink kennen.
Sie werden sehen, dass wir Attributdirektiven auf zwei Arten verwenden können:
1 mit eckigen Klammern, wie das Property Binding<div [myDirective]="foo"></div>
2 in Attributschreibweise ohne Klammern<div myDirective="foo"></div>
Der Unterschied ist subtil, aber sehr wichtig: Wenn auf der linken Seite eckige Klammern notiert sind, so wird der rechtsseitige Wert als Ausdruck interpretiert. foo bezieht sich also im ersten Beispiel auf das Property foo aus der Komponentenklasse. Lassen wir die eckigen Klammern weg, so wird rechts ein String angegeben. foo
