Читать книгу Angular - Ferdinand Malcher - Страница 159
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
