Duomenų surišimas (data binding) sujungia komponento klasę su jos šablonu. Angular turi keturias formas, kurios skiriasi duomenų srauto kryptimi ir jų unikalią 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 -->
Skliausteliai [ ] susieja savybę su išraiška (vienkryptis, duomenys srauta žemyn į vaizdą).
<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 -->
Skliausteliai ( ) klausosi įvykių (vienkryptis, duomenys srauta aukštyn iš vaizdo į klasę).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Sintaksė [(...)] ("bananas dėžėje") sujungia savybės + įvykio surišimą dvikrypčiam sinchronizavimui — dažniausiai naudojama su ngModel formų įvesties laukuose.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Dvikryptis [()] yra tik savybės surišimas [] plius įvykio surišimas () sujungti — skliausteliai parodo kryptis.
Duomenų surišimas yra tai, kaip Angular saugo klasę ir šabloną sinchronizuotus — tai yra mechanizmas, kuris stovi už kiekvieno dinaminio UI.
Žinojimas keturių tipų ir jų sintaksės ({{}}, [], (), [()]) ir kurioje kryptyje kiekvienas srauta yra būtinas bet kurio Angular šablono skaitymui ir rašymui; beveik kiekviena Angular šablono eilutė naudoja vieną iš jų.