Je hebt al kennisgemaakt met de basistypen 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 de id, title en de status completed. 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. Een ternaire operator kan worden gebruikt 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 "Undo" weergegeven; 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 visuele uiterlijk wanneer de taak 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 is gemarkeerd (true), wordt deze als niet voltooid gemarkeerd (false), en omgekeerd.

Nu moeten we deze methoden laten werken wanneer op de knoppen wordt geklikt. We moeten ze binden aan de 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 toggleTask()-methode 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 deleteTask()-methode aan, die momenteel nog niet is geïmplementeerd, omdat het verwijderen van taken later wordt 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.