Datenbindung verbindet eine Komponentenklasse mit ihrem Template. Angular hat vier Formen, die sich durch die Richtung des Datenflusses und ihre charakteristische Syntax unterscheiden.
{{ title }}
{{ price * quantity }}
<img [src]="imageUrl" /> <!-- bind a DOM property -->
<button [disabled]="isLoading">Save</button>
<app-child [user]="currentUser"></app-child> <!-- pass to a component @Input -->
Eckige Klammern [ ] binden eine Property an einen Ausdruck (unidirektional, Daten fließen hinunter in die View).
<button (click)="save()">Save</button> <!-- DOM event → method -->
<input (input)="onInput($event)" /> <!-- $event = the event object -->
<app-child (deleted)="onDeleted($event)"></app-child> <!-- component @Output -->
Klammern ( ) lauschen auf Ereignisse (unidirektional, Daten fließen hinauf aus der View zur Klasse).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Die [(...)] Syntax ("Banane in einer Box") kombiniert Property + Event Binding für bidirektionale Synchronisierung — am häufigsten mit ngModel auf Formulareingaben.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Das Two-Way [()] ist einfach Property Binding [] plus Event Binding () kombiniert — die Klammern zeigen die Richtungen.
Datenbindung ist der Mechanismus, wie Angular die Klasse und das Template synchron hält — es ist das System hinter jeder dynamischen UI.
Die vier Typen und ihre Syntax ({{}}, [], (), [()]) zu kennen und zu wissen, welche Richtung jeder Typ hat, ist essentiell zum Lesen und Schreiben eines beliebigen Angular-Templates; fast jede Zeile eines Angular-Templates nutzt einen davon.