Data binding jikkonnetti il-klassi ta' komponent mal-template tiegħu. Angular għandu erba' forom, distinti bid-direzzjoni tal-fluss tad-data u s-sintassi distinttiva tagħhom.
{{ 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 -->
I-parentesi kwadri [ ] jibdtu proprjetà ma' espressjoni (one-way, id-data tgħaddi isfel fil-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 -->
Il-parentesi ( ) jistħarsu l-avvenimenti (one-way, id-data tgħaddi isfel mill-view għall-klassi).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Is-sintassi [(...)] ("banana f'kattura") tikombina property + event binding għal two-way sync — l-aktar komunement ma' ngModel fuq il-form inputs.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
It-two-way [()] huwa sempliċement property binding [] plus event binding () magħquda — il-parentesi kwadri juri d-direzzjonijiet.
Data binding hu kif Angular iżomm il-klassi u t-template sinsinduni — huwa l-mekkaniżmu wara kull UI dinamiku.
Innaqqsu t-erba' tipi u s-sintassi tagħhom ({{}}, [], (), [()]) u liema direzzjoni kull waħda tgħaddi huwa essenzjali għall-qari u l-kitba ta' kwalunkwe template ta' Angular; kważi kull linja ta' template ta' Angular tuża waħda minnhom.