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
6.1.4Den BookMonkey erstellen
Story – Listenansicht
Als Leser möchte ich einen Überblick über alle vorhandenen Bücher erhalten, um mir den nächsten Lesetitel heraussuchen zu können.
Jedes Projekt braucht einen einfachen Anfang. Es bietet sich an, für den BookMonkey im ersten Schritt eine einfache Listenansicht für unsere Bücher zu implementieren. Weitere Funktionen werden später folgen.
Ein Buch soll durch ein Vorschaubild dargestellt werden.
Es sollen sowohl der Titel, der Untertitel als auch die Autoren des Buchs dargestellt werden.
Die Entität »Buch«
