Wenn eine Komponente und ihr Template miteinander interagieren, können Daten und Ereignisse auf verschiedene Arten zwischen ihnen ausgetauscht werden. Dies wird als Datenbindung bezeichnet.

In Angular gibt es vier Arten der Datenbindung, die jeweils einem bestimmten Zweck dienen.

Sehen wir uns an, wie sie funktionieren, indem wir eine einfache Aufgabenkomponente als Beispiel verwenden:

Hier erstellen wir ein Aufgabenobjekt mit drei Eigenschaften: id, title und completed. Diese Eigenschaften beschreiben eine bestimmte Aufgabe – ihren Namen und ob sie abgeschlossen wurde.

Interpolation

Beispielsweise kann eine Variable wie task.title in {{ }} eingeschlossen werden, sodass Angular deren Wert im HTML rendert.

Wenn Angular das Template verarbeitet, findet es den Ausdruck {{ task.title }} und ersetzt ihn durch den aktuellen Wert von task.title aus der Komponente.

Wenn der Wert 'Buy groceries' ist, erscheint genau dieser Text innerhalb des <h3>-Tags. Dasselbe Verfahren gilt für alle anderen Werte, die Sie interpolieren.

Interpolation ist also einseitig: Die Daten fließen von der Komponente zum Template, und der Benutzer sieht lediglich das Ergebnis.

Property Binding

Manchmal möchten Sie nicht nur Text anzeigen, sondern auch das Verhalten eines Elements steuern, etwa einen Button deaktivieren, eine Bildquelle setzen oder eine Checkbox markieren.

Angular ermöglicht das Binden von Werten an Eigenschaften von HTML-Elementen mithilfe von eckigen Klammern.

Stellen Sie sich vor, die Aufgabe ist bereits erledigt (task.completed = true). In diesem Fall soll die Schaltfläche deaktiviert sein. Wenn Angular [disabled]="task.completed" sieht, übernimmt es den Wert aus der Komponente und bindet ihn an die disabled-Eigenschaft des DOM-Elements.

Ist der Wert true, wird die Schaltfläche deaktiviert. Ist er false, bleibt die Schaltfläche aktiv.

Auch dies ist eine Einweg-Bindung: Die Daten fließen von der Komponente zum Template, und das Template passt sich an den aktuellen Zustand des task-Objekts an.

Ereignisbindung

Um Ihre Anwendung auf Benutzeraktionen (wie Klicks) reagieren zu lassen, stellt Angular die Ereignisbindung bereit. Wenn ein Benutzer mit einem Element interagiert, können Sie dieses Ereignis "abfangen" und eine Methode in Ihrer Komponente aufrufen.

Fügen wir der Komponente eine Methode hinzu:

Und aktualisieren Sie das Template:

Wenn der Benutzer auf die Schaltfläche klickt, erkennt Angular das (click)-Ereignis und ruft die Methode toggleComplete() in der Komponente auf. Diese Methode wechselt den Wert von task.completed. Anschließend rendert Angular das Template neu und dank der Interpolation ({{ task.completed ? 'Undo' : 'Complete' }}) aktualisiert sich der Schaltflächentext sofort.

Hier fließen die Daten in eine Richtung – vom Template zurück in die Komponente (eine Aktion wird nach innen übergeben).

Zwei-Wege-Bindung

Manchmal ist es erforderlich, dass Änderungen im Template (wie das Eingeben in ein Eingabefeld) sofort die Komponente aktualisieren — und Änderungen in der Komponente sofort das Template. Angular vereinfacht dies mit der Zwei-Wege-Bindung mittels [(ngModel)].

Wichtig: Um [(ngModel)] zu verwenden, muss das FormsModule importiert werden — wie unten gezeigt:

Und hier ist das Template:

Hier findet die Magie der Zwei-Wege-Bindung statt. Wenn ein Benutzer in das Eingabefeld tippt, aktualisiert Angular automatisch task.title innerhalb der Komponente. Und wenn sich task.title in der Komponente ändert, spiegelt Angular diese Änderung sofort im Eingabefeld wider.

Im Gegensatz zu den anderen Bindungsarten hält die Zwei-Wege-Bindung die Komponente und das Template jederzeit synchron.

Wichtige Unterschiede

Jede dieser Bindungsmethoden verfügt über eigene Merkmale und eignet sich am besten für unterschiedliche Szenarien der Dateninteraktion innerhalb einer Anwendung.