Data binding yhdistää komponentin luokan sen templateen. Angularissa on neljä muotoa, jotka erotellaan tiedon kulun suunnan ja niille ominaisen syntaksin perusteella.
{{ 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 -->
Hakasulkeet [ ] sitovat propertyn lausekkeeseen (yksisuuntainen, tieto kulkee alas näkymään).
<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 -->
Kaarisulkeet ( ) kuuntelevat tapahtumia (yksisuuntainen, tieto kulkee ylös näkymästä luokkaan).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
[(...)]-syntaksi ("banaani laatikossa") yhdistää property- ja event bindingin kaksisuuntaiseen synkronointiin — yleisimmin ngModel-direktiivin kanssa lomakekentissä.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Kaksisuuntainen [()] on yksinkertaisesti property binding [] ja event binding () yhdistettynä — sulkeet näyttävät suunnat.
Data binding on tapa, jolla Angular pitää luokan ja templaten synkronissa — se on mekanismi jokaisen dynaamisen käyttöliittymän takana.
Neljän tyypin ja niiden syntaksin ({{}}, [], (), [()]) sekä kunkin tiedon kulkusuunnan tunteminen on välttämätöntä minkä tahansa Angular-templaten lukemiseen ja kirjoittamiseen; lähes jokainen Angular-templaten rivi käyttää jotakin niistä.