På hovedsiden av appen vår ser brukeren en liste over alle oppgaver. Dette gir en rask oversikt over hva som må gjøres.

Men hva om brukeren ønsker å se detaljene for en bestemt oppgave — dens unike ID, nøyaktige tittel og status? For dette trenger vi en egen side for oppgavedetaljer.

Dette kapittelet viser hvordan du bygger TaskDetailsComponent, som åpnes når brukeren navigerer til en spesifikk URL og viser informasjon om en bestemt oppgave.

Opprette en ny komponent

For å vise oppgavedetaljer, oppretter vi en frittstående komponent. Den vil være uavhengig og kan kobles direkte i ruteoppsettet.

Kjør denne kommandoen:

Dette vil opprette filen task-details.component.ts sammen med tilhørende mal, stilark og tester. Du kan trygt slette testfilen hvis du ønsker det.

Implementering av komponenten

På dette stadiet trenger vi kun oppgave-id, tittel og status — dette er all informasjonen vi har om en oppgave. Derfor legger vi bare til en task-egenskap i komponenten.

Nå skal vi lage malen og tilhørende CSS-stiler:

Malen bruker direktivet *ngIf for å vise oppgavekortet dersom oppgaven finnes; ellers vises meldingen "Task not found" ved hjelp av ng-template.

Inne i kortet vises ID, title og status for oppgaven, samt en knapp for å gå tilbake til hovedlisten over oppgaver (vi legger til funksjonaliteten for knappen senere).

Nå er TaskDetailsComponent klar til bruk. Vi kobler den til rutingen i neste kapittel.