können wir die Daten innerhalb dieser Komponente auslesen und verarbeiten. Property Bindings werden ebenfalls automatisch aktualisiert, wenn sich die Daten ändern. Wir müssen uns also nicht darum kümmern, Änderungen an den Daten manuell mitzuteilen.
Das folgende Beispiel zeigt Property Bindings im praktischen Einsatz. Wir setzen damit das Property href des Anker-Elements auf den Wert der Komponenteneigenschaft myUrl. Das zweite Beispiel setzt das Property myProp der Komponente MyComponent mit dem Wert des Propertys foo aus der aktuellen Komponente.
<a [href]="myUrl">My Link</a>
<my-component [myProp]="foo">
Property Bindings werden im Abschnitt ab Seite 102 ausführlich behandelt.
Eselsbrücke
Um in JavaScript auf eine Eigenschaft eines Objekts zuzugreifen, verwenden wir ebenfalls eckige Klammern: obj[property].
(Event Bindings)
Gegenstück zu Property Bindings
Event Bindings bieten die Möglichkeit, auf Ereignisse zu reagieren, die im Template einer Komponente auftreten. Solche Ereignisse können nativ von einem DOM-Element stammen (z. B. ein Klick) oder in einer eingebundenen Komponente getriggert werden. Event Bindings sind also das Gegenstück zu Property Bindings, denn die Daten fließen aus dem Template in die Komponentenklasse. Im folgenden Beispiel wird ein click-Event ausgelöst, wenn der Nutzer den Button anklickt. Das Ereignis wird mit der Methode myClickHandler() abgefangen und behandelt.
<button (click)="myClickHandler()">Click me</button>
Wie wir Events in Komponenten auslösen und welche eingebauten Events abonniert werden können, schauen wir uns ausführlich ab Seite 114 an.
Eselsbrücke
In JavaScript verwenden wir runde Klammern für Funktionen: function(). Vor diesem Hintergrund lässt sich die Syntax für Event Bindings auch leicht merken, denn wir führen eine Funktion aus, nachdem ein Ereignis aufgetreten ist.
[(Two-Way Bindings)]
Mit Property Bindings haben wir »schreibende« und mit den Event Bindings »lesende« Operationen kennengelernt. Beide Varianten sind unidirektional, die Daten fließen also nur in eine Richtung.
Datenbindung in zwei Richtungen
Im Zusammenhang mit der Formularverarbeitung werden wir später sehen, wie wir eine Datenbindung auch in beide Richtungen aufsetzen können: von der Komponente ins Formularfeld (wenn sich die Daten ändern) und vom Formularfeld in die Komponente (wenn der Nutzer etwas eingibt). Die Syntax ist sehr einfach herzuleiten, denn es werden lediglich Property Bindings und Event Bindings miteinander kombiniert:
<input [(ngModel)]="myProperty" type="text">
Formularverarbeitung mit Two-Way Bindings schauen wir uns in Iteration IV ab Seite 275 noch ausführlich an.
Eselsbrücke
Für diese Eselsbrücke ist etwas Fantasie nötig. Die Kombination von runden und eckigen Klammern ( [()] ) sieht ein wenig wie eine Banane in einer Kiste aus (»Banana Box«). Alternativ funktioniert auch eine Eselsbrücke aus dem Ballsport: Das Runde muss ins Eckige.
#Elementreferenzen
In einem Template können wir einzelne HTML-Elemente mit Namen versehen und diese Namen an anderer Stelle verwenden, um auf das Element zuzugreifen. Damit können wir aus dem Template heraus die Eigenschaften eines Elements verwenden, ohne den Umweg über die Komponentenklasse zu gehen. Solche Elementreferenzen werden mit einem Rautensymbol # notiert.
<input #id type="text" value="Angular">
{{ id.value }}
Input-Felder haben beispielsweise immer ein Property value, in dem der aktuelle Wert hinterlegt ist. Das Beispiel {{ id.value }} macht deutlich, dass die lokale Referenz tatsächlich auf das DOM-Element zeigt und nicht nur auf dessen Wert. Beim Start wird der Text Angular neben dem Formularfeld ausgegeben. Geben wir einen neuen Wert in das Input-Feld ein, aktualisiert sich der interpolierte Text allerdings nicht. Das ist kein Fehler, sondern ein erwünschtes Verhalten von Angular.3
Direktiven
Wir haben gelernt, dass wir mit Property und Event Bindings zwischen der Komponente und den DOM-Elementen kommunizieren können. Was allerdings noch fehlt, ist ein Konstrukt, um das Verhalten der Elemente zu steuern. So möchten wir zum Beispiel ein Element nur unter einer Bedingung hinzufügen oder mehrfach wiederholen können.
Hierfür gibt es spezielle HTML-Attribute, die Direktiven genannt werden. Sie geben einem Element zusätzliche Logik, sodass sich das Element anders verhält. Wir unterscheiden dabei zwischen Strukturdirektiven und Attributdirektiven.
Während Attributdirektiven das »innere« Verhalten des Elements steuern, ändern Strukturdirektiven immer die Struktur des DOM-Baums, indem sie Elemente hinzufügen oder entfernen.
*Strukturdirektiven
Strukturdirektiven verändern die Struktur des DOM-Baums.
Mit Strukturdirektiven können wir DOM-Elemente hinzufügen oder entfernen und damit die Struktur des Dokuments verändern. Strukturdirektiven werden immer zusammen mit dem Stern-Zeichen * notiert und als Attribut auf einem DOM-Element eingesetzt. Die Direktive entscheidet dann anhand bestimmter Kriterien, ob und wie das Element in den DOM-Baum eingebaut wird. Die bekanntesten Vertreter der Strukturdirektiven sind ngIf, ngFor und ngSwitch.
ngIf : Bedingungen zum Anzeigen von Elementen
Die Direktive ngIf fügt das betroffene Element nur dann in den DOM-Baum ein, wenn der angegebene Ausdruck wahr ist. Sie kann z. B. eingesetzt werden, um ein Element mit einer Fehlermeldung nur dann anzuzeigen, wenn auch ein Fehler aufgetreten ist.
<div *ngIf="hasError">Fehler aufgetreten</div>
Listing 6–6 ngIf verwenden
Die Direktive verfügt zusätzlich über einen optionalen Else-Zweig. Mehr dazu erfahren Sie unter »Wissenswertes« ab Seite 755.
ngFor
