Når en komponent og dens skabelon interagerer, kan du overføre data og hændelser mellem dem på forskellige måder. Dette kaldes databinding.

I Angular findes der fire typer databinding, som hver især tjener et specifikt formål.

Lad os se på, hvordan de fungerer ved hjælp af et simpelt opgavekomponent som eksempel:

Her opretter vi et opgaveobjekt med tre egenskaber: id, title og completed. Disse egenskaber beskriver en bestemt opgave—dens navn og om den er fuldført.

Interpolation

For eksempel, hvis du har en variabel som task.title, kan du omslutte den med {{ }}, og Angular vil gengive dens værdi i HTML'en.

Når Angular behandler skabelonen, finder den udtrykket {{ task.title }} og erstatter det med den aktuelle værdi af task.title fra komponenten.

Hvis værdien er 'Buy groceries', er det præcis det, der vises inde i <h3>-tagget. Den samme proces gælder for alle andre værdier, du interpolerer.

Så interpolation er envejs: data flyder fra komponenten til skabelonen, og brugeren ser blot resultatet.

Egenskabsbinding

Nogle gange vil du ikke kun vise tekst — du vil kontrollere elementets opførsel, som at deaktivere en knap, angive en billedkilde eller markere en afkrydsningsboks.

Angular giver dig mulighed for at binde værdier til HTML-elementegenskaber ved hjælp af kantede parenteser.

Forestil dig, at opgaven allerede er fuldført (task.completed = true). I dette tilfælde ønsker vi, at knappen skal være deaktiveret. Når Angular ser [disabled]="task.completed", tager den værdien fra komponenten og binder den til DOM-elementets disabled-egenskab.

Hvis værdien er true, bliver knappen deaktiveret. Hvis den er false, forbliver knappen aktiv.

Dette er igen envej-binding: data flyder fra komponenten til skabelonen, og skabelonen tilpasses baseret på den aktuelle tilstand af task-objektet.

Begivenheds-binding

For at få din app til at reagere på brugerhandlinger (som klik), tilbyder Angular begivenheds-binding. Når en bruger interagerer med et element, kan du "opfange" denne begivenhed og kalde en metode i din komponent.

Lad os tilføje en metode til komponenten:

Og opdater skabelonen:

Når brugeren klikker på knappen, registrerer Angular (click)-begivenheden og kalder metoden toggleComplete() i komponenten. Denne metode skifter værdien af task.completed. Derefter gengiver Angular skabelonen igen, og takket være interpolation ({{ task.completed ? 'Undo' : 'Complete' }}) opdateres knapteksten øjeblikkeligt.

Her flyder data én vej — fra skabelonen tilbage til komponenten (du sender en handling indad).

To-vejs binding

Nogle gange ønsker du, at ændringer i skabelonen (som at indtaste tekst i et inputfelt) straks opdaterer komponenten — og at ændringer i komponenten straks opdaterer skabelonen. Angular gør dette nemt med to-vejs binding ved hjælp af [(ngModel)].

Vigtigt: For at bruge [(ngModel)] skal du importere FormsModule — som vist nedenfor:

Og her er skabelonen:

Her sker magien med tovej-binding. Når en bruger indtaster i inputfeltet, opdaterer Angular automatisk task.title inde i komponenten. Og når task.title ændres i komponenten, afspejler Angular straks denne opdatering i inputfeltet.

I modsætning til de andre bindingstyper holder tovej-binding komponenten og skabelonen synkroniseret til enhver tid.

Nøgleforskelle

Hver af disse bindingstyper har sine egne egenskaber og egner sig bedst til forskellige scenarier for dataudveksling i en applikation.