Quels composants sont nécessaires ?

Vous savez déjà ce qu'est un composant. Il est maintenant temps de créer votre propre composant pouvant être utilisé dans l'application.

L'application sera composée de deux composants. Le premier est le TaskComponent, qui est responsable de l'affichage d'une seule tâche. À l'intérieur de ce composant, vous afficherez l'id, le title et le status de la tâche. Vous ajouterez également des boutons permettant à l'utilisateur de terminer ou de supprimer la tâche.

Le second composant est le TaskListComponent, qui sert de contenant pour toutes les tâches. Il contient un tableau de tâches et affiche chacune d'elles à l'aide du TaskComponent. Ce composant gérera également la logique d'ajout, de mise à jour et de suppression des tâches.

En résumé, le TaskComponent gère l'apparence et le comportement d'une seule tâche, tandis que le TaskListComponent administre la liste complète des tâches et l'interaction entre elles.

Règles pour la création d’un composant

Dans Angular, l’Angular CLI est utilisé pour créer des composants. Il s’agit d’un outil pratique qui génère automatiquement tous les fichiers nécessaires et intègre le composant dans la partie appropriée de votre projet.

Vous devez créer deux composants : TaskComponent et TaskListComponent. L’un sera chargé d’afficher les tâches individuelles, et l’autre gérera la liste des tâches.

Structure du projet

Pour garder une organisation claire, nous allons créer un dossier séparé pour chaque composant dans le répertoire src/app. Cela facilitera la navigation et la maintenance du code, en particulier à mesure que l’application grandit.

Création du TaskComponent

Pour générer un composant, utilisez l’Angular CLI. Ouvrez le terminal dans VS Code et assurez-vous d’être à la racine de votre projet. Exécutez ensuite la commande suivante :

Ou, une version plus courte :

Voici une explication de la commande :

Après l'exécution de la commande, un nouveau dossier task sera créé dans src/app, contenant quatre fichiers :

Il s'agit de la configuration standard pour tout composant. La seule différence réside dans le préfixe des noms de fichiers (task dans ce cas), qui provient du nom que vous avez fourni dans la commande de génération.

Création du composant TaskListComponent

Création du composant pour la liste des tâches, comme précédemment. Exécution de la commande suivante :

Cela génère un nouveau dossier task-list contenant les fichiers suivants :

Ces fichiers remplissent les mêmes fonctions que dans le TaskComponent, mais ils concernent désormais le second composant.

À ce stade, vous disposez de deux composants distincts avec une structure claire : TaskComponent, qui gère la logique et le modèle pour une seule tâche, et TaskListComponent, qui gère l'ensemble de la liste des tâches.