Når en komponent og dens mal samhandler, kan du overføre data og hendelser mellom dem på ulike måter. Dette kalles databinding.

I Angular finnes det fire typer databinding, som hver har sitt spesifikke formål.

La oss se på hvordan de fungerer ved å bruke en enkel oppgavekomponent som eksempel:

Her oppretter vi et task-objekt med tre egenskaper: id, title og completed. Disse egenskapene beskriver en spesifikk oppgave—navnet og om den er fullført.

Interpolasjon

For eksempel, hvis du har en variabel som task.title, kan du omslutte den med {{ }}, og Angular vil gjengi verdien i HTML-en.

Når Angular prosesserer malen, finner den uttrykket {{ task.title }} og erstatter det med den nåværende verdien av task.title fra komponenten.

Hvis verdien er 'Buy groceries', er det akkurat det som vil vises inne i <h3>-taggen. Den samme prosessen gjelder for alle andre verdier du interpolerer.

Dermed er interpolasjon enveis: data flyter fra komponenten til malen, og brukeren ser kun resultatet.

Egenskapsbinding

Noen ganger ønsker du ikke bare å vise tekst — du vil kontrollere elementets oppførsel, som å deaktivere en knapp, sette en bildekilde eller merke av i en avkrysningsboks.

Angular lar deg binde verdier til HTML-elementegenskaper ved å bruke hakeparenteser.

Tenk deg at oppgaven allerede er fullført (task.completed = true). I så fall ønsker vi at knappen skal være deaktivert. Når Angular ser [disabled]="task.completed", henter den verdien fra komponenten og binder den til DOM-elementets disabled-egenskap.

Hvis verdien er true, blir knappen deaktivert. Hvis den er false, forblir knappen aktiv.

Dette er igjen enveisbinding: data flyter fra komponenten til malen, og malen tilpasses basert på gjeldende tilstand for task-objektet.

Hendelsesbinding

For å få appen din til å reagere på brukerhandlinger (som klikk), tilbyr Angular hendelsesbinding. Når en bruker samhandler med et element, kan du "fange" den hendelsen og kalle en metode i komponenten din.

La oss legge til en metode i komponenten:

Og oppdater malen:

Når brukeren klikker på knappen, oppdager Angular (click)-hendelsen og kaller toggleComplete()-metoden i komponenten. Denne metoden bytter verdien til task.completed. Deretter gjengir Angular malen på nytt, og takket være interpolasjon ({{ task.completed ? 'Undo' : 'Complete' }}), oppdateres knappeteksten umiddelbart.

Her flyter data én vei — fra malen tilbake til komponenten (du sender en handling innover).

Toveis-binding

Noen ganger ønsker du at endringer i malen (for eksempel når du skriver i et inndatafelt) umiddelbart skal oppdatere komponenten — og at endringer i komponenten umiddelbart skal oppdatere malen. Angular gjør dette enkelt med toveis-binding ved å bruke [(ngModel)].

Viktig: For å bruke [(ngModel)], må du importere FormsModule — som vist nedenfor:

Her er malen:

Dette er stedet hvor magien med toveis binding skjer. Når en bruker skriver i inndatafeltet, oppdaterer Angular automatisk task.title inne i komponenten. Og når task.title endres i komponenten, reflekterer Angular umiddelbart denne oppdateringen i inndatafeltet.

I motsetning til andre typer binding, holder toveis binding komponenten og malen synkronisert til enhver tid.

Viktige forskjeller

Hver av disse bindingmetodene har sine egne egenskaper og egner seg best for ulike scenarier for datainteraksjon i en applikasjon.