Sur la page principale de notre application, l'utilisateur voit une liste de toutes les tâches. Cela permet d'obtenir rapidement un aperçu de ce qui doit être fait.

Mais que faire si l'utilisateur souhaite consulter les détails d'une tâche spécifique — son identifiant unique, son titre exact et son statut ? Pour cela, il est nécessaire de créer une page dédiée aux détails de la tâche.

Ce chapitre vous montrera comment construire le TaskDetailsComponent, qui s'ouvre lorsque l'utilisateur navigue vers une URL spécifique et affiche les informations concernant une tâche particulière.

Création d’un nouveau composant

Pour afficher les détails d'une tâche, un composant autonome sera créé. Il sera indépendant et pourra être directement relié dans la configuration du routage.

Exécutez cette commande :

Cela créera le fichier task-details.component.ts ainsi que son template, ses styles et ses tests. Vous pouvez supprimer le fichier de test si vous le souhaitez.

Implémentation du composant

À ce stade, seules l'identifiant, le titre et le statut de la tâche sont nécessaires — ce sont les seules informations dont nous disposons sur une tâche. Ainsi, dans le composant, nous allons simplement ajouter une propriété task.

Créons maintenant le template et ses styles CSS :

Le template utilise la directive *ngIf pour afficher la carte de détails de la tâche si la tâche existe ; sinon, il affiche un message « Tâche non trouvée » à l'aide de ng-template.

À l'intérieur de la carte, il affiche l'ID, le titre et le statut de la tâche, ainsi qu'un bouton pour revenir à la liste principale des tâches (nous ajouterons la fonctionnalité du bouton plus tard).

Notre TaskDetailsComponent est maintenant prêt à être utilisé. Nous le connecterons à notre système de routage dans le prochain chapitre.