Podatkovni vezava povezuje razred komponente z njeno predlogo. Angular ima štiri oblike, razlikovane po smeri pretoka podatkov in njihove značilne sintakse.
{{ 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 -->
Oglatimi oklepaji [ ] vezajo lastnost na izraz (enosmernega, podatki tečejo navzdol v pogled).
<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 -->
Oklepaji ( ) poslušajo dogodke (enosmernega, podatki tečejo navzgor iz pogleda v razred).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Sintaksa [(...)] ("banana v škatli") kombinira vezavo lastnosti + vezavo dogodka za dvosmernost — najpogosteje z ngModel na vhodih obrazcev.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Dvosmerka [()] je le vezava lastnosti [] in vezava dogodka () kombinirana — oglatimi oklepaji pokažejo smeri.
Podatkovni vezava je način, kako Angular drži razred in predlogo usklajene — to je mehanizem za vsak dinamičen vmesnik.
Znanje štirih vrst in njihove sintakse ({{}}, [], (), [()]) in katero smer vsaka teče, je bistvenega pomena za branje in pisanje kakršne koli Angular predloge; skoraj vsaka vrstica Angel predloge uporablja eno od njih.