Data binding inalinganisha darasa la kipengee na kiolezo chake. Angular ina aina nne, zinazotofautiana na mwelekeo wa mtiririko wa data na sintaksia yao ya kipekee.
{{ 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 -->
Mabano ya mraba [ ] hufunga mali kwa usemi (upande mmoja, data inatoka chini ndani ya mtazamo).
<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 -->
Mabano ( ) kusikia matukio (upande mmoja, data inatoka juu kutoka mtazamo hadi darasa).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Sintaksia [(...)] ("ndani ndani ya sanduku") inachanganya property binding + event binding kwa synchronization ya upande mmoja — kawaida zaidi na ngModel kwenye pembejeo za fomu.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Upande mmoja wa [()] ni property binding [] pamoja na event binding () iliyounganishwa — mabano yanaonyesha mwelekeo.
Data binding ni jinsi Angular inaendelea kuandika darasa na kiolezo — ni utaratibu nyuma ya kila interfesi ya dynamic.
Kujua aina nne na sintaksia yao ({{}}, [], (), [()]) na mwelekeo ambayo kila moja inatoka ni muhimu kwa kusoma na kuandika kiolezo chochote cha Angular; karibu kila mstari wa kiolezo cha Angular hutumia mojawapo ya hizo.