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 conteneur 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 pour ajouter, mettre à jour et supprimer 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. Cet outil pratique génère automatiquement tous les fichiers nécessaires et intègre le composant à l’emplacement approprié du projet.

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

Structure du projet

Pour garantir une organisation optimale, un dossier distinct sera créé pour chaque composant dans le répertoire src/app. Cette approche facilite la navigation et la maintenance du code, en particulier à mesure que l’application évolue.

Création du TaskComponent

Pour générer un composant, l’Angular CLI doit être utilisé. Ouvrir le terminal dans VS Code et vérifier que l’emplacement courant correspond à la racine du projet. Exécuter 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 TaskListComponent

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

Cela va générer 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.