Du er allerede blevet introduceret til 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 dets id, title og completed-status. Vi definerer dette objekt inden for 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. En ternær operator kan anvendes til at justere knapteksten baseret på værdien af task.completed.

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

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

Tilføjelse af dynamiske klasser med property binding

Nu tilføjes muligheden for at ændre opgavens udseende baseret på dens tilstand. Property binding anvendes til betinget at tilføje 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 ændres det visuelle udtryk, når opgaven er fuldført: teksten gennemstreges, farven bliver grå, og baggrunden bliver lysegrå. Alle disse stilarter er defineret i .completed CSS-klassen, som tidligere er beskrevet.

Binding af hændelser til knapper

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

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

• "Slet"-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;
}

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

• Metoden toggleTask() 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 skifter task.completed-tilstanden. Dette ændrer også knapteksten fra "Fuldfør" til "Fortryd" afhængigt af opgavens status.

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

Nu er skabelonen til vores enkle opgavekomponent fuldt implementeret. 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.