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 einen bestimmten Zweck erfüllen.

Im Folgenden wird anhand einer einfachen Aufgabenkomponente erläutert, wie diese funktionieren:

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

Interpolation

Wenn zum Beispiel eine Variable wie task.title vorhanden ist, kann diese in {{ }} eingeschlossen werden, und Angular rendert deren Wert in das HTML.

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. Der gleiche Prozess 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, wie z. B. das Deaktivieren eines Buttons, das Setzen einer Bildquelle oder das Aktivieren eines Kontrollkästchens.

Angular ermöglicht es, Werte an Eigenschaften von HTML-Elementen mit eckigen Klammern zu binden.

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)-Event 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' }}) wird der Schaltflächentext sofort aktualisiert.

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 aktualisieren. 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 des Zwei-Wege-Bindings 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 anderen Bindungsarten hält das Zwei-Wege-Binding 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.