Data binding összeköti egy komponens osztályát annak sablonnal. Az Angular négy formáját az adatáramlás iránya és jellegzetes szintaxisuk különbözteti meg.
1. Interpoláció — osztály → nézet (szöveg)
html
{{ title }}
{{ price * quantity }}
Data binding összeköti egy komponens osztályát annak sablonnal. Az Angular négy formáját az adatáramlás iránya és jellegzetes szintaxisuk különbözteti meg.
{{ 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 -->
A szögletes zárójelek [ ] egy tulajdonságot kötnek egy kifejezéshez (egyirányú, az adatok lefelé áramlanak a nézetbe).
<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 -->
A zárójelek ( ) hallgatnak az eseményekre (egyirányú, az adatok felfelé áramlanak a nézetből az osztályba).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
A [(...)] szintaxis ("banana in a box") kombinálja a tulajdonság-kötést + eseménykötést kétirányú szinkronizáláshoz — leggyakrabban ngModel segítségével az űrlap bemeneteknél.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
A kétirányú [()] csupán a tulajdonság-kötés [] és az eseménykötés () kombinálva — a zárójelek mutatják az irányokat.
Az adatkötés az az eszköz, amely az Angular-ban szinkronban tartja az osztályt és a sablont — ez a mechanizmus minden dinamikus felhasználói felület mögött.
Az négy típus és szintaxisuk ({{}}, [], (), [()]) ismerete, valamint az, hogy melyik irányban áramlik az adatok, elengedhetetlen bármilyen Angular-sablon olvasásához és írásához; egy Angular-sablon szinte minden sora az egyik típust használja.