Wanneer een component en zijn template met elkaar communiceren, kun je op verschillende manieren data en events tussen hen uitwisselen. Dit wordt data binding genoemd.

In Angular zijn er vier typen data binding, elk met een specifiek doel.

Laten we bekijken hoe ze werken aan de hand van een eenvoudig taakcomponent als voorbeeld:

Hier maken we een taakobject aan met drie eigenschappen: id, title en completed. Deze eigenschappen beschrijven een specifieke taak—de naam en of deze is voltooid.

Interpolatie

Bijvoorbeeld, als u een variabele zoals task.title heeft, kunt u deze tussen {{ }} plaatsen en Angular zal de waarde ervan in de HTML weergeven.

Wanneer Angular de template verwerkt, vindt het de expressie {{ task.title }} en vervangt deze door de huidige waarde van task.title uit de component.

Als de waarde 'Buy groceries' is, verschijnt precies dat binnen de <h3>-tag. Hetzelfde proces geldt voor alle andere waarden die je interpoleert.

Dus, interpolatie is eenrichtingsverkeer: data stroomt van de component naar de template, en de gebruiker ziet alleen het resultaat.

Property Binding

Soms wil je niet alleen tekst tonen — je wilt het gedrag van een element bepalen, zoals het uitschakelen van een knop, het instellen van een afbeeldingsbron of het aanvinken van een selectievakje.

Angular maakt het mogelijk om waarden te koppelen aan HTML-elementeigenschappen met behulp van vierkante haken.

Stel je voor dat de taak al voltooid is (task.completed = true). In dat geval willen we dat de knop uitgeschakeld is. Wanneer Angular [disabled]="task.completed" ziet, neemt het de waarde uit de component en bindt deze aan de disabled-eigenschap van het DOM-element.

Als de waarde true is, wordt de knop uitgeschakeld. Als het false is, blijft de knop actief.

Dit is opnieuw eenrichtingsbinding: de data stroomt van de component naar de template, en de template past zich aan op basis van de huidige status van het task-object.

Gebeurtenisbinding

Om je app te laten reageren op gebruikersacties (zoals klikken), biedt Angular gebeurtenisbinding. Wanneer een gebruiker met een element interacteert, kun je dat evenement "opvangen" en een methode in je component aanroepen.

Laten we een methode toevoegen aan de component:

En werk de template bij:

Wanneer de gebruiker op de knop klikt, detecteert Angular het (click)-event en roept de toggleComplete()-methode in de component aan. Deze methode wisselt de waarde van task.completed om. Daarna rendert Angular de template opnieuw en dankzij interpolatie ({{ task.completed ? 'Undo' : 'Complete' }}) wordt de knoptekst direct bijgewerkt.

Hier stroomt de data één kant op — van de template terug naar de component (je geeft een actie naar binnen door).

Twee-weg binding

Soms wilt u dat wijzigingen in de template (zoals typen in een invoerveld) direct de component bijwerken — en dat wijzigingen in de component direct de template bijwerken. Angular maakt dit eenvoudig met twee-weg binding via [(ngModel)].

Belangrijk: Om [(ngModel)] te gebruiken, moet u de FormsModule importeren — zoals hieronder weergegeven:

En hier is de template:

Hier vindt de magie van tweerichtingsbinding plaats. Wanneer een gebruiker in het invoerveld typt, werkt Angular automatisch task.title bij in de component. En wanneer task.title verandert in de component, geeft Angular die wijziging direct weer in het invoerveld.

In tegenstelling tot andere vormen van binding, houdt tweerichtingsbinding de component en de template voortdurend gesynchroniseerd.

Belangrijkste verschillen

Elk van deze bindmethoden heeft zijn eigen kenmerken en is het meest geschikt voor verschillende scenario's van gegevensinteractie binnen een applicatie.