Op de hoofdpagina van onze app ziet de gebruiker een lijst van alle taken. Dit biedt een snel overzicht van wat er moet gebeuren.

Maar wat als de gebruiker de details van een specifieke taak wil bekijken — het unieke ID, de exacte titel en de status? Daarvoor moeten we een aparte pagina voor taakdetails maken.

In dit hoofdstuk leer je hoe je de TaskDetailsComponent bouwt, die opent wanneer de gebruiker naar een specifieke URL navigeert en informatie over een bepaalde taak toont.

Een nieuw component aanmaken

Om taakdetails weer te geven, maken we een standalone component. Dit component is onafhankelijk en kan direct in de routeringsconfiguratie worden opgenomen.

Voer dit commando uit:

Hiermee wordt het bestand task-details.component.ts aangemaakt, samen met het template, de stijlen en de tests. Je kunt het testbestand gerust verwijderen als je dat wilt.

Implementatie van de Component

In dit stadium hebben we alleen het id, de titel en de status van de taak nodig — dit is alle informatie die we over een taak hebben. Dus in de component voegen we alleen een task-eigenschap toe.

Laten we nu de template en de bijbehorende CSS-stijlen aanmaken:

De template gebruikt de *ngIf-directive om de taakdetailskaart weer te geven als de taak bestaat; anders wordt een "Taak niet gevonden"-melding getoond via ng-template.

Binnen de kaart worden de ID, titel en status van de taak weergegeven, evenals een knop om terug te keren naar de hoofdtaaklijst (de functionaliteit van deze knop voegen we later toe).

Onze TaskDetailsComponent is nu klaar voor gebruik. In het volgende hoofdstuk koppelen we deze aan onze routing.