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

I Angular finns det fyra typer av databindning, var och en med ett specifikt syfte.

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

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

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 precis 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-elementets 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 efter 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 interpolationen ({{ 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:

Här sker magin med tvåvägsbindning. 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 lämpar sig bäst för olika scenarier av datainteraktion inom en applikation.