Databinding kobler en komponents klasse med malen. Angular har fire former, atskilt av retningen på dataflyt og deres karakteristiske syntaks.
1. Interpolation — klasse → visning (tekst)
html
{{ 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 -->
Firkantede parentes [ ] binder en egenskap til et uttrykk (enveis, data flyter ned i visningen).
<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 -->
Parentes ( ) lytter etter hendelser (enveis, data flyter opp fra visningen til klassen).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
[(...)] syntaksen ("banan i en boks") kombinerer property + event binding for toveis synkronisering — mest vanlig med ngModel på skjemainput.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Toveis [()] er bare property binding [] pluss event binding () kombinert — parentesene viser retningene.
Databinding er hvordan Angular holder klassen og malen synkronisert — det er mekanismen bak hver dynamisk UI.
Å kjenne de fire typene og deres syntaks ({{}}, [], (), [()]) og hvilken retning hver flyter er essensielt for å lese og skrive en Angular-mal; nesten hver linje i en Angular-mal bruker en av dem.