Читать книгу Angular - Ferdinand Malcher - Страница 153

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>