Data binding lidh klasën e komponentës me shablonin e saj. Angular ka katër forma, të dallueshme sipas drejtimit të rrjedhës së të dhënave dhe sintaksës së tyre karakteristike.
{{ 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 -->
Kllapat katrore [ ] lidhin një pronë me një shprehje (në një drejtim, të dhënat rrjedhin poshtë në pamje).
<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 -->
Kllapat ( ) dëgjojnë për ngjarje (në një drejtim, të dhënat rrjedhin lart nga pamja në klasën).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Sintaksa [(...)] ("banane në kutie") kombinon lidhjen e pronës + lidhjen e ngjarjes për sinkronizim dypërbrinjës — më shpesh me ngModel në inputet e formularit.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Dypërbrinjësi [()] është vetëm lidhje pronie [] plus lidhje ngjarjeje () të kombinuara — kllapat tregojnë drejtimet.
Data binding është se si Angular mbajnë klasën dhe shablonin në sinkronizim — është mekanizmi prapa çdo ndërfaqeje dinamike.
Njohuritë e katër llojeve dhe sintaksës së tyre ({{}}, [], (), [()]) dhe cila drejtim bën secila është thelbësore për leximin dhe shkrimin e ndonjë shablloni Angular; pothuajse çdo rresht i një shablloni Angular përdor njërin prej tyre.