Data binding povezuje klasu komponente sa njezinim šablonom. Angular ima četiri oblika, razlikovane prema smjeru toka podataka i njihovoj karakterističnoj sintaksi.
{{ 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 -->
Uglatite zagrade [ ] vežu svojstvo na izraz (jednosmjeran, podaci teku prema dolje u prikaz).
<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 -->
Zagrade ( ) slušaju događaje (jednosmjeran, podaci teku prema gore od prikaza ka klasi).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Sintaksa [(...)] ("banana in a box") kombinira vezivanje svojstva + vezivanje događaja za dvosmjernu sinhronizaciju — najčešće sa ngModel na unose formi.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Dvosmjerno vezivanje [()] je samo vezivanje svojstva [] plus vezivanje događaja () kombinovano — zagrade pokazuju smjerove.
Data binding je način na koji Angular održava klasu i šablon sinhronizovanih — to je mehanizam iza svakog dinamičkog korisničkog sučelja.
Znati četiri tipa i njihovu sintaksu ({{}}, [], (), [()]) i koji smjer svaki teče ključno je za čitanje i pisanje bilo kojeg Angular šablona; gotovo svaki redak Angular šablona koristi jedan od njih.