Data binding connette la classe di un componente con il suo template. Angular ha quattro forme, distinte dalla direzione del flusso di dati e dalla loro sintassi distintiva.
{{ 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 -->
Le parentesi quadre [ ] collegano una proprietà a un'espressione (unidirezionale, i dati fluiscono verso il basso nel 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 -->
Le parentesi tonde ( ) ascoltano gli eventi (unidirezionale, i dati fluiscono verso l'alto dal view alla classe).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
La sintassi [(...)] ("banana in a box") combina property binding + event binding per sincronizzazione bidirezionale — più comunemente con ngModel su input di form.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Il two-way [()] è semplicemente property binding [] più event binding () combinati — le parentesi mostrano le direzioni.
Data binding è il modo in cui Angular mantiene la classe e il template sincronizzati — è il meccanismo dietro ogni UI dinamica.
Conoscere i quattro tipi e la loro sintassi ({{}}, [], (), [()]) e quale direzione fluisce ciascuno è essenziale per leggere e scrivere qualsiasi template Angular; quasi ogni riga di un template Angular utilizza uno di essi.