Implementatie van de TaskDetailscomponent
Op de hoofdpagina van onze app ziet de gebruiker een lijst van alle taken. Dit maakt het eenvoudig om snel een overzicht te krijgen van wat er gedaan moet worden.
Maar wat als de gebruiker de details van een specifieke taak wil zien — 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 weergeeft.
Een nieuw component aanmaken
Om taakdetails weer te geven, maken we een op zichzelf staand component. Dit component is onafhankelijk en kan direct worden gekoppeld in de routeringsconfiguratie.
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.
De component implementeren
In deze fase 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 voegen we in de component alleen een task-eigenschap toe.
component.ts
Vergeet niet om CommonModule te importeren in de component, omdat we deze in de template nodig zullen hebben.
Laten we nu de template en de bijbehorende CSS-stijlen aanmaken:
component.html
component.css
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 de knop voegen we later toe).
Nu is onze TaskDetailsComponent klaar voor gebruik. In het volgende hoofdstuk koppelen we deze aan onze routing.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 3.13Implementatie van de TaskDetailscomponent
Veeg om het menu te tonen
Op de hoofdpagina van onze app ziet de gebruiker een lijst van alle taken. Dit maakt het eenvoudig om snel een overzicht te krijgen van wat er gedaan moet worden.
Maar wat als de gebruiker de details van een specifieke taak wil zien — 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 weergeeft.
Een nieuw component aanmaken
Om taakdetails weer te geven, maken we een op zichzelf staand component. Dit component is onafhankelijk en kan direct worden gekoppeld in de routeringsconfiguratie.
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.
De component implementeren
In deze fase 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 voegen we in de component alleen een task-eigenschap toe.
component.ts
Vergeet niet om CommonModule te importeren in de component, omdat we deze in de template nodig zullen hebben.
Laten we nu de template en de bijbehorende CSS-stijlen aanmaken:
component.html
component.css
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 de knop voegen we later toe).
Nu is onze TaskDetailsComponent klaar voor gebruik. In het volgende hoofdstuk koppelen we deze aan onze routing.
Bedankt voor je feedback!
