Je hebt al kennisgemaakt met de basisvormen van databinding. Laten we nu bekijken hoe deze in de praktijk worden toegepast bij het werken met de TaskComponent.

Taakstructuur

Onze taakcomponent toont de taaktitel en twee knoppen: één om de taakstatus te wijzigen (van "Voltooid" naar "Ongedaan maken"), en één om de taak te verwijderen. Dit is de HTML-structuur die gebruikt zal worden:

De stijlen zijn al gedefinieerd. Je kunt ze bekijken door over te schakelen naar het bestand style.css.

Componentimplementatie

Onze component werkt met een taakobject, dat informatie over de taak opslaat, zoals het id, de title en de completed status. We definiëren dit object binnen de componentklasse:

export class TaskComponent {
  task = { id: 1, title: 'Buy groceries', completed: false };
}

We kunnen deze gegevens weergeven in de HTML-template van de component.

Gebruik van componentgegevens in de template

Om gegevens uit het task-object weer te geven, verwijzen we eenvoudigweg direct naar de eigenschappen ervan in de template. Bijvoorbeeld, om de titel van de taak weer te geven:

<div class="task-title">{{ task.title }}</div>

Als de taak is voltooid, moet de knoptekst veranderen. We kunnen een ternaire operator gebruiken om de knoptekst aan te passen op basis van de waarde van task.completed.

<button class="complete">
  {{ task.completed ? 'Undo' : 'Complete' }}
</button>

Als task.completed true is, wordt de knoptekst weergegeven als "Undo"; anders wordt "Complete" getoond. Op deze manier past de knoptekst zich dynamisch aan de huidige status van de task aan.

Dynamische klassen toevoegen met property binding

Nu voegen we de mogelijkheid toe om het uiterlijk van de taak te wijzigen op basis van de status. We gebruiken property binding om conditioneel een CSS-klasse toe te passen:

<div class="task" [class.completed]="task.completed">

Dit betekent: als task.completed true is, wordt de klasse completed aan het element toegevoegd. Anders wordt de klasse niet toegepast.

Hierdoor verandert het uiterlijk van de taak zodra deze is voltooid: de tekst wordt doorgestreept, de kleur wordt grijs en de achtergrond lichtgrijs. Al deze stijlen zijn gedefinieerd in de .completed CSS-klasse, die hierboven is beschreven.

Gebeurtenissen aan knoppen koppelen

Laten we nu gebeurtenissen aan de knoppen koppelen zodat de juiste acties worden uitgevoerd wanneer op de knoppen wordt geklikt. We hebben twee knoppen:

• De "Voltooien" / "Ongedaan maken" knop — wanneer hierop wordt geklikt, wordt de voltooiingsstatus van de taak omgeschakeld;

• De "Verwijderen" knop — wanneer hierop wordt geklikt, wordt de taak verwijderd.

Hiervoor maken we twee methoden aan in de TaskComponent:

deleteTask() {
  // Method to delete the task. We'll implement it later.
}

toggleTask() {
  // Toggles the value of task.completed.
  this.task.completed = !this.task.completed;
}

• De deleteTask()-methode blijft voorlopig leeg omdat we nog geen takenlijst hebben om items uit te verwijderen;

• De toggleTask()-methode schakelt eenvoudigweg de waarde van task.completed om. Als de taak als voltooid (true) is gemarkeerd, wordt deze als niet voltooid (false) gemarkeerd, en omgekeerd.

Nu, om deze methoden te laten werken wanneer op de knoppen wordt geklikt, moeten we ze koppelen aan klikgebeurtenissen van de knoppen. We gebruiken Event Binding met het click-event om te luisteren naar klikken op de knoppen en de bijbehorende methoden aan te roepen.

In dit voorbeeld stelt event binding ons in staat om gebruikersacties te koppelen aan componentmethoden. De "Voltooien" / "Ongedaan maken"-knop roept de methode toggleTask() aan, die de status van task.completed wijzigt. Dit verandert ook de knoptekst van "Voltooien" naar "Ongedaan maken" op basis van de status van de taak.

De "Verwijderen"-knop roept de methode deleteTask() aan, die momenteel nog niet is geïmplementeerd, omdat het verwijderen van taken later zal worden toegevoegd.

Nu hebben we de template voor onze eenvoudige taakcomponent volledig geïmplementeerd. Zo ziet de component eruit:

Het component levert de gegevens en de template zorgt voor de visuele weergave. Samen creëren ze een interactieve en gebruiksvriendelijke taakinterface, waarbij gegevens worden weergegeven, het uiterlijk verandert en de knoppen zich aanpassen aan de status van de taak.