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 en simpel task-komponent som eksempel:

Her opretter vi et task-objekt med tre egenskaber: id, title og completed. Disse egenskaber beskriver en specifik 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, så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 så fald ø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.

Hændelsesbinding

For at få din app til at reagere på brugerhandlinger (som klik), tilbyder Angular hændelsesbinding. Når en bruger interagerer med et element, kan du "opfange" denne hændelse 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 toggleComplete()-metoden i komponenten. Denne metode skifter værdien af task.completed. Derefter genindlæser Angular skabelonen, 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 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 hele tiden.

Væsentlige forskelle

Hver af disse bindingmetoder har sine egne egenskaber og er bedst egnet til forskellige scenarier for dataudveksling i en applikation.