Angular. Ferdinand Malcher
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 bezeichnet an dieser Stelle also tatsächlich die Zeichenkette foo.
Merke: Eckige Klammern → Ausdruck
Wenn links eckige Klammern stehen, so wird rechts ein Ausdruck notiert. Ohne eckige Klammern wird die rechte Seite eines Attributs als String ausgewertet.
| Pipes
Pipes werden genutzt, um Daten für die Anzeige zu transformieren. Hinter einer Pipe steckt eine Funktion, die den Eingabewert nach einer bestimmten Vorschrift verarbeitet und das tranformierte Ergebnis zurückgibt. Wir können Pipes in jedem Template-Ausdruck verwenden, also bei der Interpolation, in Property Bindings oder in Direktiven. Sie werden durch das Symbol | (das »Pipe-Zeichen«) eingeleitet:
<p>{{ name | lowercase }}</p>
Pipes verketten
Pipes können auch aneinandergehängt werden, um mehrere Transformationen durchzuführen:
<p>{{ myDate | date | uppercase }}</p>
In der Iteration V ab Seite 353 widmen wir uns den Pipes noch sehr ausführlich. Dort lernen wir auch, wie wir eigene Pipes implementieren können.
Ist das alles gültiges HTML?
Obwohl die vielen verschiedenen Klammern und Sonderzeichen zunächst ungewöhnlich sind, handelt es sich um syntaktisch gültiges HTML. Dazu ziehen wir die HTML-Spezifikation des W3C zurate. Hier heißt es:
»Attribute names must consist of one or more characters other than the space characters, U+0000, NULL, «, ’, >, /, =, the control characters, and any characters that are not defined by Unicode.«4
Auch mit der Angular-Syntax schreiben wir also valides HTML. Trotzdem kennt der Browser natürlich keine Event oder Property Bindings. Deshalb werden all diese Ausdrücke von Angular automatisch so umgewandelt, dass jeder Browser damit umgehen kann.
Zusammenfassung
Die Template-Syntax von Angular ist ein simples, aber mächtiges Werkzeug, um ein dynamisches Zusammenspiel von Komponente und Template zu erreichen. Jedes Verfahren verfügt über eine eigene Schreibweise. Alle Bestandteile der Template-Syntax und ihre konkreten Anwendungen sind noch einmal in den folgenden Tabellen dargestellt.
Auf den ersten Blick erscheint die neue Template-Syntax womöglich komplex und umständlich. Aber glauben Sie uns: Nachdem wir alle Konzepte in der Praxis behandelt haben, werden Sie die Notationen ohne Probleme anwenden können.
| Name | Beispiel | Beschreibung |
| Interpolation | {{ expression }} | Daten im Template anzeigen |
| Property Binding | [property]="expression" | Eigenschaften eines DOM-Elements schreiben |
| Event Binding | (event)="myHandler($event)" | Event abonnieren |
| Two-Way Binding | [(ngModel)]="myModel" | Eigenschaften setzen und Ereignisse verarbeiten, vor allem verwendet für Template-Driven Forms |
| Attributdirektive | [ngClass]="expression" | Eigenschaften/Verhalten eines DOM-Elements verändern |
| Strukturdirektive | *ngIf="expression" | DOM-Baum manipulieren, indem Elemente hinzugefügt oder entfernt werden |
| Elementreferenz | #myId | Direktzugriff auf DOM-Elemente oder ihre Direktiven |
| Pipe | expr | myPipe | otherPipe | Daten im Template transformieren |
Tab. 6–2 Template-Syntax: Übersicht
| Name | Beispiel | Beschreibung |
| Bedingungen | *ngIf="expression" | Element nur rendern, wenn expression wahr ist |
| Schleifen | *ngFor="let e of list" | Element für jedes item e des Arrays list wiederholen |
| Attribute Binding | [attr.colspan]="myColspan" | Attribut colspan mit dem Wert des Propertys myColspan schreiben |
| Style Binding | [style.color]="myColor" | CSS-Property color mit dem Wert des Propertys myColor schreiben |
| Class Binding | [class.myClass]="expression" | CSS-Klasse myClass anwenden, wenn expression wahr ist |
| ngClass | [ngClass]="classList" | CSS-Klassen aus dem Property classList auf das Element anwenden |
| ngClass | [ngClass]="{ myClass: isValid, otherClass: hasError }" | CSS-Klassen konditional anwenden: Klasse myClass, wenn isValid wahr, usw. |
Tab. 6–3 Template-Syntax: konkrete Anwendungen