Wanneer een component en zijn template met elkaar communiceren, kunnen gegevens en gebeurtenissen op verschillende manieren tussen hen worden uitgewisseld. Dit wordt gegevensbinding genoemd.

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

Hier volgt een overzicht van hun werking aan de hand van een eenvoudig taakcomponent als voorbeeld:

Hier wordt een taakobject aangemaakt 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 dit exact binnen de <h3>-tag. Hetzelfde proces geldt voor alle andere waarden die u interpoleert.

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

Property Binding

Soms wilt u niet alleen tekst weergeven — u 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 binden aan HTML-elementeigenschappen met behulp van vierkante haken.

Stel je voor dat de taak al is voltooid (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 die gebeurtenis "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 is het wenselijk 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 je 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, wordt die wijziging direct weergegeven in het invoerveld.

In tegenstelling tot andere bindingstypen 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.