Datová vazba spojuje třídu komponenty s její šablonou. Angular má čtyři formy rozlišené směrem toku dat a jejich charakteristickou syntaxí.
1. Interpolace — třída → pohled (text)
html
{{ 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 -->
Hranatých závorek [ ] váže vlastnost na výraz (jednosměrně, data tečou dolů do pohledu).
<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 -->
Závorky ( ) naslouchají událostem (jednosměrně, data tečou nahoru z pohledu do třídy).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Syntaxe [(...)] ("banán v krabici") kombinuje vazbu vlastnosti + vazbu na událost pro dvousměrnou synchronizaci — nejčastěji s ngModel na vstupech formuláře.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Dvousměrná vazba [()] je pouze vazba vlastnosti [] plus vazba na událost () kombinované — závorky ukazují směry.
Dataová vazba je způsob, jakým Angular udržuje třídu a šablonu v synchronizaci — je to mechanismus za každým dynamickým UI.
Znalost čtyř typů a jejich syntaxe ({{}}, [], (), [()]) a směru toku každého z nich je nezbytná pro čtení a psaní jakékoli šablony Angular; téměř každý řádek šablony Angular používá jednu z nich.