Du har allerede stiftet bekendtskab med grundlæggende typer af databinding. Lad os nu se på, hvordan de anvendes i praksis, når vi arbejder med TaskComponent.

Opgavestruktur

Vores opgavekomponent vil vise opgavetitlen samt to knapper: én til at ændre opgavestatus (fra "Fuldført" til "Fortryd"), og én til at slette opgaven. Her er den HTML-struktur, der vil blive brugt:

Stilarterne er allerede defineret. Du kan gennemgå dem ved at skifte til filen style.css.

Komponentimplementering

Vores komponent vil arbejde med et task-objekt, som gemmer information om opgaven, såsom dens id, title og completed-status. Vi definerer dette objekt i komponentklassen:

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

Vi kan vise disse data i komponentens HTML-skabelon.

Brug af komponentdata i skabelonen

For at vise data fra task-objektet refererer vi blot direkte til dets egenskaber i skabelonen. For eksempel for at vise opgavens titel:

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

Hvis opgaven er fuldført, skal knapteksten ændres. Vi kan bruge en ternær operator til at justere knapteksten baseret på værdien af task.completed.

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

Hvis task.completed er true, vil knapteksten vise "Undo", ellers vil den vise "Complete". På denne måde tilpasses knapteksten dynamisk til den aktuelle tilstand af task.

Tilføjelse af dynamiske klasser med property binding

Nu tilføjer vi muligheden for at ændre udseendet af opgaven baseret på dens tilstand. Vi bruger property binding til betinget at anvende en CSS-klasse:

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

Dette betyder: hvis task.completed er true, tilføjes completed-klassen til elementet. Ellers anvendes klassen ikke.

Som resultat vil det visuelle udseende ændre sig, når opgaven er fuldført: teksten bliver gennemstreget, farven bliver grå, og baggrunden bliver lysegrå. Alle disse stilarter er defineret i .completed CSS-klassen, som jeg har beskrevet ovenfor.

Binding af hændelser til knapper

Lad os nu binde hændelser til knapperne, så de relevante handlinger udføres, når knapperne klikkes på. Vi har to knapper:

• "Complete" / "Undo"-knappen — når den klikkes, vil den skifte opgavens fuldførelsesstatus;

• "Delete"-knappen — når den klikkes, vil den slette opgaven.

For at gøre dette opretter vi to metoder i 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;
}

• deleteTask()-metoden forbliver tom indtil videre, da vi endnu ikke har en opgaveliste at fjerne elementer fra;

• toggleTask()-metoden skifter blot værdien af task.completed. Hvis opgaven er markeret som fuldført (true), markeres den som ufuldført (false), og omvendt.

For at få disse metoder til at fungere, når knapperne klikkes, skal vi binde dem til knappernes klikbegivenheder. Vi bruger Event Binding med click-begivenheden for at lytte efter klik på knapperne og kalde de tilsvarende metoder.

I dette eksempel gør event binding det muligt at forbinde brugerhandlinger med komponentmetoder. "Fuldfør" / "Fortryd"-knappen kalder toggleTask()-metoden, som ændrer task.completed-tilstanden. Dette ændrer også knapteksten fra "Fuldfør" til "Fortryd" afhængigt af opgavens status.

"Slet"-knappen kalder deleteTask()-metoden, som endnu ikke er implementeret, da sletning af opgaver tilføjes senere.

Nu er vi færdige med at implementere skabelonen for vores enkle opgavekomponent. Sådan ser komponenten ud:

Komponenten leverer dataene, og skabelonen giver den visuelle repræsentation. Sammen skaber de en interaktiv og brugervenlig opgavegrænseflade, hvor data vises, udseendet ændres, og knapperne tilpasses opgavens tilstand.