När en komponent och dess mall interagerar kan data och händelser överföras mellan dem på olika sätt. Detta kallas databindning.

I Angular finns det fyra typer av databindning, där varje typ har ett specifikt syfte.

Låt oss titta på hur de fungerar med hjälp av en enkel uppgiftskomponent som exempel:

Här skapas ett task-objekt med tre egenskaper: id, title och completed. Dessa egenskaper beskriver en specifik uppgift—dess namn och om den är slutförd.

Interpolering

Till exempel, om du har en variabel som task.title, kan du omsluta den med {{ }}, och Angular kommer att rendera dess värde i HTML-koden.

När Angular bearbetar mallen hittar den uttrycket {{ task.title }} och ersätter det med det aktuella värdet av task.title från komponenten.

Om värdet är 'Buy groceries', är det exakt det som kommer att visas inuti <h3>-taggen. Samma process gäller för alla andra värden du interpolerar.

Så, interpolering är envägs: data flödar från komponenten till mallen, och användaren ser helt enkelt resultatet.

Egenskapsbindning

Ibland vill du inte bara visa text — du vill styra elementets beteende, som att inaktivera en knapp, ange en bildkälla eller markera en kryssruta.

Angular låter dig binda värden till HTML-elementens egenskaper med hjälp av hakparenteser.

Föreställ dig att uppgiften redan är slutförd (task.completed = true). I så fall vill vi att knappen ska vara inaktiverad. När Angular ser [disabled]="task.completed" tar den värdet från komponenten och binder det till DOM-elementets disabled-egenskap.

Om värdet är true blir knappen inaktiverad. Om det är false förblir knappen aktiv.

Detta är återigen envägsbindning: data flödar från komponenten till mallen, och mallen anpassas baserat på det aktuella tillståndet för task-objektet.

Händelsebindning

För att få din app att reagera på användaråtgärder (som klick) tillhandahåller Angular händelsebindning. När en användare interagerar med ett element kan du "fånga" den händelsen och anropa en metod i din komponent.

Låt oss lägga till en metod i komponenten:

Och uppdatera mallen:

När användaren klickar på knappen upptäcker Angular (click)-händelsen och anropar metoden toggleComplete() i komponenten. Denna metod växlar värdet på task.completed. Därefter renderar Angular om mallen, och tack vare interpolation ({{ task.completed ? 'Undo' : 'Complete' }}) uppdateras knappens text omedelbart.

Här flödar data i en riktning — från mallen tillbaka till komponenten (du skickar en åtgärd inåt).

Tvåvägsbindning

Ibland vill du att ändringar i mallen (till exempel när du skriver i ett inmatningsfält) omedelbart ska uppdatera komponenten — och att ändringar i komponenten omedelbart ska uppdatera mallen. Angular gör detta enkelt med tvåvägsbindning med hjälp av [(ngModel)].

Viktigt: För att använda [(ngModel)] måste du importera FormsModule — som visas nedan:

Och här är mallen:

Det är här magin med tvåvägsbindning sker. När en användare skriver i inmatningsfältet uppdaterar Angular automatiskt task.title i komponenten. Och när task.title ändras i komponenten, återspeglar Angular omedelbart den uppdateringen i inmatningsfältet.

Till skillnad från andra typer av bindning håller tvåvägsbindning komponenten och mallen synkroniserade hela tiden.

Viktiga skillnader

Var och en av dessa bindningsmetoder har sina egna egenskaper och är bäst lämpade för olika scenarier av datainteraktion inom en applikation.