À ce stade, notre application sait déjà comment afficher une liste de tâches et montrer un message lorsqu'il n'y en a aucune. Cependant, les utilisateurs n'ont toujours pas la possibilité d'ajouter de nouvelles tâches.

Nous allons ajouter la possibilité de créer une nouvelle tâche à l'aide d'un bouton pratique et d'un formulaire modal.

Nous allons mettre en œuvre :

• Un bouton Add élégant ;

• Une fenêtre modale avec un champ de saisie pour le titre de la tâche ;

• La logique d'ajout d'une tâche à la liste dans le TaskService ;

• La génération automatique d'un identifiant unique.

Mise en route

La première chose à faire est d'améliorer notre TaskService afin qu'il puisse créer et stocker de nouvelles tâches. Le service doit non seulement stocker les tâches, mais aussi gérer toute la logique métier qui leur est liée.

Nous allons créer une méthode addTask dans le service. La génération d'un identifiant unique, la création de l'objet tâche et son enregistrement dans la liste se feront tous à l'intérieur du service. La méthode recevra uniquement un title, qui sera transmis depuis le TaskListComponent.

La méthode addTask() prend uniquement le titre de la tâche et crée l'objet Task en interne. Elle recherche d'abord l'identifiant maximal parmi les tâches existantes, puis ajoute 1 pour générer un identifiant unique. La nouvelle tâche est toujours définie comme incomplète (completed: false) et est immédiatement ajoutée au tableau tasks.

Cette approche élimine la logique superflue du composant et rend le service à la fois autonome et réutilisable.

Mise à jour du TaskListComponent

Maintenant que toute la logique de création d'une nouvelle tâche a été déplacée dans le service, le composant est uniquement responsable de recevoir la saisie de l'utilisateur, d'envoyer le titre de la tâche au service et d'actualiser la liste locale des tâches. Cette approche simplifie le composant et centralise la logique métier dans le TaskService.

Dans le composant, nous ajouterons deux variables :

• showAddTask — un indicateur qui contrôle la visibilité de la fenêtre modale pour l'ajout d'une tâche ;

• newTaskTitle — une chaîne de caractères pour stocker la saisie du titre de la tâche par l'utilisateur.

Nous implémenterons également la méthode addTask(), qui :

1. Vérifie que la chaîne saisie n'est pas vide ;

2. Transmet le titre de la tâche à la méthode addTask(title: string) du service ;

3. Actualise la liste locale des tâches ;

4. Efface le champ de saisie et ferme la fenêtre modale.

La méthode addTask() est désormais aussi simple que possible : elle ne gère que l'interaction utilisateur et délègue toute la logique métier au service. Cela rend le code plus facile à maintenir et à tester.

Assurez-vous également que FormsModule est importé dans votre module, car il est nécessaire pour la liaison bidirectionnelle des données avec newTaskTitle.

Bouton Ajouter et Fenêtre Modale

Ajoutons maintenant la partie interface utilisateur : le bouton Ajouter et le balisage HTML pour la fenêtre modale qui inclut le champ de saisie et les boutons.

Lorsque l'utilisateur clique sur le bouton Add, la variable showAddTask devient true et la fenêtre modale s'affiche. Le champ de saisie est lié à la variable newTaskTitle via [(ngModel)], et les actions des boutons permettent soit d'enregistrer la tâche, soit de fermer la fenêtre modale sans modification.

Les utilisateurs peuvent ainsi ajouter des tâches facilement via un formulaire modale. La nouvelle tâche apparaît immédiatement dans la liste sans nécessiter de rafraîchissement de la page.

Nous avons désormais mis en place une interactivité qui rend notre application complète et conviviale pour une utilisation quotidienne.