Data binding აკავშირებს კომპონენტის class-ს მის template-თან. Angular-ს აქვს ოთხი ფორმა, რომელიც განირჩევა მონაცემების ნაკადის მიმართულებით და მათი დამახასიათებელი სინტაქსით.
{{ 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 -->
ბრჭყალი [ ] აკავშირებს property-ს expression-ს (ცალმხრივი, მონაცემები მიედინება ქვემოთ view-ში).
<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 -->
ფრჩხილები ( ) ჩვენებენ ივენტებს (ცალმხრივი, მონაცემები მიედინება ზემოთ view-დან class-ში).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
[(...)] სინტაქსი ("banana in a box") აერთიანებს property + event binding-ს ორმხრივი sync-ისთვის — ყველაზე ხშირად ngModel-ით form inputs-ზე.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
ორმხრივი [()] არის მხოლოდ property binding [] პლუს event binding () გაერთიანებული — ფრჩხილები აჩვენებენ მიმართულებებს.
Data binding არის თუ როგორ შეინარჩუნებს Angular class-ს და template-ს sync-ში — ეს არის მექანიზმი ყოველი დინამიური UI-ს უკან.
ოთხი ტიპის და მათი სინტაქსის ({{}}, [], (), [()]) ცოდნა და თითოეულის მიმართულება არის აუცილებელი Angular template-ის წაკითხვა-დაწერისთვის; Angular template-ის თითქმის ყოველი ხაზი იყენებს მათგან ერთ-ერთს.