Legarea datelor conectează clasa unui component cu templateul acestuia. Angular are patru forme, distingse de direcția fluxului de date și sintaxa lor caracteristică.
{{ 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 -->
Parantezele pătrate [ ] leagă o proprietate la o expresie (într-o singură direcție, datele curg în jos în vizualizare).
<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 -->
Parantezele ( ) ascultă evenimentele (într-o singură direcție, datele curg în sus din vizualizare în clasă).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Sintaxa [(...)] ("banană într-o cutie") combină legarea proprietății + legarea evenimentului pentru sincronizare bidirecțională — cel mai frecvent cu ngModel pe intrările de formular.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Bidirecționalul [()] este doar legarea proprietății [] plus legarea evenimentului () combinate — parantezele arată direcțiile.
Legarea datelor este modul în care Angular ține clasa și templateul sincronizate — este mecanismul din spatele fiecărei UI dinamice.
Cunoașterea celor patru tipuri și a sintaxei acestora ({{}}, [], (), [()]) și a direcției în care curg fiecare este esențială pentru citirea și scrierea oricărui template Angular; aproape fiecare linie a unui template Angular folosește unul dintre acestea.