Data binding yana haɗa ajin haɗin gida tare da jijiyarsa. Angular yana da nau'i hudu, waɗanda aka rarrabawa da alkibla na jigon bayani da kalmarsu na musamman.
1. Haɗawa — ajin → gida (rubutu)
html
{{ title }}
{{ price * quantity }}
Data binding yana haɗa ajin haɗin gida tare da jijiyarsa. Angular yana da nau'i hudu, waɗanda aka rarrabawa da alkibla na jigon bayani da kalmarsu na musamman.
{{ 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 -->
Gajerjewau [ ] suna haɗa kadarori zuwa bayani (gida ɗaya, jigon bayani yana ɗaga ƙasa a cikin gida).
<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 -->
Bakwakin ( ) suna sauraron abubuwa (gida ɗaya, jigon bayani yana sama daga gida zuwa ajin).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
kalmar [(...)] ("banana in a box") yana haɗa kadarori + haɗawa abubuwa don aikin biyan gida — galibin lokaci tare da ngModel a shigarwar fomu.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Haɗawa biyan gida [()] shine haɗa kadarori [] da haɗawa abubuwa () tare - gajerjewau suna nuna fushar.
Data binding shine yadda Angular ke ajiyar ajin da jijiyar - ita ce hanyar bayan kowane UI mai haɗari.
Sanin nau'i hudu da kalmarsu {{}}, [], (), [()] da wane alkibla kowa ya ke ajiyar isa - shi ne mahimmanci ga karatun da rubutuwan jijiyar Angular; kusan kowane layi na jijiyar Angular yana amfani da ɗaya.