Datbinding forbinder en komponents klasse med dens template. Angular har fire former, adskilt efter retningen af dataflow og deres karakteristiske syntaks.
1. Interpolation — klasse → view (tekst)
html
{{ title }}
{{ price * quantity }}
Datbinding forbinder en komponents klasse med dens template. Angular har fire former, adskilt efter retningen af dataflow og deres karakteristiske syntaks.
{{ 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 -->
Firkantparenteser [ ] binder en property til et udtryk (one-way, data flyder ned i viewet).
<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 -->
Parenteser ( ) lytter efter events (one-way, data flyder op fra viewet til klassen).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Syntaksen [(...)] ("banan i en kasse") kombinerer property + event binding for two-way synkronisering — mest almindeligt med ngModel på formularinput.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Two-way [()] er blot property binding [] plus event binding () kombineret — parenteserne viser retningerne.
Databinding er hvordan Angular holder klassen og templaten i synkronisering — det er mekanismen bag ethvert dynamisk UI.
At kende de fire typer og deres syntaks ({{}}, [], (), [()]) og hvilken retning hver flyder i er essentielt for at læse og skrive enhver Angular template; næsten hver linje i en Angular template bruger en af dem.