Du har allerede blitt kjent med grunnleggende typer databinding. Nå skal vi se på hvordan disse brukes i praksis når vi arbeider med TaskComponent.

Oppgavestruktur

Vår oppgavekomponent vil vise oppgavetittel, samt to knapper: én for å endre oppgavestatus (fra "Fullført" til "Angre"), og én for å slette oppgaven. Her er HTML-strukturen som vil bli brukt:

Stilene er allerede definert. Du kan se gjennom dem ved å bytte til filen style.css.

Komponentimplementering

Vår komponent skal arbeide med et oppgaveobjekt, som lagrer informasjon om oppgaven, slik som id, title og completed-status. Vi definerer dette objektet i komponentklassen:

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

Vi kan vise disse dataene i komponentens HTML-mal.

Bruk av komponentdata i malen

For å vise data fra task-objektet, refererer vi direkte til dets egenskaper i malen. For eksempel, for å vise oppgavetittelen:

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

Hvis oppgaven er fullført, skal knappeteksten endres. Vi kan bruke en ternær operator for å justere knappeteksten basert på verdien til task.completed.

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

Hvis task.completed er true, vil knappeteksten vise "Undo", ellers vil den vise "Complete". På denne måten tilpasses knappeteksten dynamisk til gjeldende tilstand for task.

Legge til dynamiske klasser med egenskapsbinding

Nå skal vi legge til muligheten til å endre utseendet til oppgaven basert på dens tilstand. Vi bruker egenskapsbinding for å betinge bruk av en CSS-klasse:

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

Dette betyr: hvis task.completed er true, vil completed-klassen bli lagt til elementet. Ellers vil ikke klassen bli brukt.

Som et resultat, når oppgaven er fullført, vil det visuelle utseendet endres: teksten blir gjennomstreket, fargen blir grå, og bakgrunnen blir lysegrå. Alle disse stilene er definert i .completed CSS-klassen, som jeg har beskrevet ovenfor.

Knytte hendelser til knapper

Nå skal vi knytte hendelser til knappene slik at de riktige handlingene utføres når knappene klikkes. Vi har to knapper:

• "Fullfør" / "Angre"-knappen — når den klikkes, vil den veksle oppgavens fullføringsstatus;

• "Slett"-knappen — når den klikkes, vil den slette oppgaven.

For å gjøre dette, oppretter 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() forblir tom foreløpig, siden vi ennå ikke har en oppgaveliste å fjerne elementer fra;

• Metoden toggleTask() veksler ganske enkelt verdien til task.completed. Hvis oppgaven er markert som fullført (true), blir den markert som ufullført (false), og omvendt.

For at disse metodene skal fungere når knappene klikkes, må vi binde dem til knappens klikkhendelser. Vi bruker hendelsesbinding med click-hendelsen for å lytte etter klikk på knappene og kalle de tilhørende metodene.

I dette eksemplet gjør hendelsesbinding det mulig å knytte brukerhandlinger til komponentmetoder. "Fullfør" / "Angre"-knappen kaller toggleTask()-metoden, som veksler task.completed-tilstanden. Dette endrer også knappeteksten fra "Fullfør" til "Angre" basert på oppgavens status.

"Slett"-knappen kaller deleteTask()-metoden, som for øyeblikket ikke er implementert, siden sletting av oppgaver vil bli lagt til senere.

Nå har vi fullstendig implementert malen for vår enkle oppgavekomponent. Slik ser komponenten ut:

Komponenten leverer dataene, og malen gir den visuelle representasjonen. Sammen skaper de et interaktivt og brukervennlig grensesnitt for oppgaver, der data vises, utseendet endres, og knappene tilpasses oppgavens tilstand.