Data binding ceanglaíonn rang comhpháirt lena template. Tá ceithre fhoirm ann i Angular, idirdhealaithe de réir an treo an tsreabh sonraí agus a bhréagriocht dhílseoile.
{{ 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 -->
Ceanglaíonn na lúibíní dhronuillinneacha [ ] maoin le slonn (aon-treo, sreabh sonraí síos sa amharc).
<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 -->
Eisteann na lúibíní ( ) ar imeachtaí (aon-treo, sreabh sonraí suas ó dhubh an amhairc go dtí an rang).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Comhcheanglaíonn an comhréir [(...)] ("banana in a box") ceangal maoine + ceangal imeachta le haghaidh sioncronúcháin déthreo — is gnách é a bheith in úsáid le ngModel ar ionraidí foirm.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Ní hé an ceangal déthreo [()] ach ceangal maoine [] agus ceangal imeachta () araon — taispeáiníonn na lúibíní na treoracha.
Is é data binding an bealach ar choinníonn Angular an rang agus an template i sioncronúchán — is é an meicníc a chuireann gach UI dinimiciúil ar bun.
A bheith i bhfios ag an ceithre chineál agus a bhréagriocht {{}}, [], (), [()] agus an treo a shreabhadh gach ceann díobh, tá sé riachtanach chun aon template Angular a léamh agus a scríobh; bainean an fhormhór líne i template Angular le ceann díobh.