Welche Arten der Datenbindung gibt es in Angular?

In Angular gibt es die folgenden Arten der Datenbindung:

1. Einweg-Datenbindung vom Quellcode zur Ansicht (One-Way Data Binding: Komponente zu DOM): Änderungen in der Komponente spiegeln sich in der Ansicht (HTML) wider.

   • Interpolation: Anzeige von Eigenschaften der Komponente.

     <p>{{ komponentEigenschaft }}</p>
     

   • Eigenschaftsbindung (Property Binding): Setzen von Werten der DOM-Elementeigenschaften.

     <img [src]="bildUrl">
     

2. Einweg-Datenbindung von der Ansicht zum Quellcode (One-Way Data Binding: DOM zu Komponente): Änderungen in der Ansicht (Benutzereingaben) beeinflussen die Eigenschaften der Komponente.

   • Ereignisbindung (Event Binding): Verarbeitung von DOM-Elementereignissen.

     <button (click)="handleKlick()">Klick mich</button>
     

3. Zweiweg-Datenbindung (Two-Way Data Binding): Änderungen in der Komponente und in der Ansicht beeinflussen sich gegenseitig.

   • Verwendet die Syntax [()].

     <input [(ngModel)]="benutzerName">
     

   • Erfordert den Import von FormsModule für ngModel.