Comment sont-ils connectés ?

Le TaskListComponent gérera un tableau de tâches, où chaque tâche est un objet avec les champs id, title et completed. Pour afficher chaque tâche, nous utiliserons le TaskComponent.

De plus, le TaskComponent communiquera avec son composant parent concernant les actions de l'utilisateur, telles que la suppression d'une tâche ou son marquage comme terminée. Cette interaction se fera par l'émission d'événements.

Implémentation de la logique du TaskListComponent

Création d'un composant chargé de la gestion de la liste des tâches. À l'intérieur, définition d'un tableau de tâches ainsi que de deux méthodes — deleteTask() et toggleStatus() — pour gérer les tâches.

• La liste des tâches (tasks) est gérée à l'intérieur du composant, faisant de TaskListComponent le contrôleur central ;
• La méthode deleteTask() filtre la tâche par son id ;
• La méthode toggleStatus() trouve la tâche par id et inverse son statut completed.

Ce code utilise la directive *ngFor pour parcourir le tableau tasks et créer un TaskComponent pour chaque tâche. Nous examinerons plus en détail le fonctionnement de *ngFor dans la section suivante.

• [task]="task" — transmet la tâche courante au composant enfant afin qu'il puisse l'afficher ;

• (onDelete)="deleteTask($event)" — écoute l'événement onDelete provenant de l'enfant et appelle deleteTask() pour supprimer la tâche ;

• (onToggle)="toggleStatus($event)" — écoute l'événement onToggle et appelle toggleStatus() pour modifier le statut de la tâche.

Décorateurs : @Input() et @Output()

Il est maintenant temps de connecter le TaskComponent avec le TaskListComponent, et pour cela, nous utiliserons les décorateurs @Input() et @Output().

Dans Angular, les décorateurs @Input() et @Output() sont des outils essentiels pour la communication entre composants. Ils permettent de transmettre des données à un composant et d'émettre des événements depuis un composant. Voici un aperçu rapide :

Voici un exemple illustrant leur fonctionnement dans le TaskComponent :

Dans notre cas, task est l'objet transmis depuis le composant parent TaskListComponent vers le TaskComponent.

Lorsque l'utilisateur supprime une tâche ou modifie son statut, le TaskComponent émet des événements auxquels le composant parent réagit.

@Output() et EventEmitter sont utilisés pour notifier le composant parent lorsqu'un événement se produit dans le composant enfant. Ces décorateurs permettent au composant enfant de communiquer des actions telles que la suppression d'une tâche ou la modification d'un statut au composant parent.

La méthode deleteTask() est appelée lorsque l'utilisateur souhaite supprimer une tâche. Elle émet l'id de la tâche, permettant ainsi au parent de retirer la tâche de sa liste.

La méthode toggleTask() bascule le statut d'achèvement de la tâche et informe le composant parent de ce changement.

Fonctionnement global

1. TaskListComponent transmet une tâche à TaskComponent via @Input() ;

2. L'utilisateur interagit avec la tâche (par exemple en cliquant sur « Supprimer ») ;

3. TaskComponent émet un événement (onDelete ou onToggle) avec l'id de la tâche ;

4. TaskListComponent intercepte l'événement et met à jour la liste des tâches ;

5. Angular actualise automatiquement l'interface utilisateur en fonction des données mises à jour.

Ainsi, @Input() et @Output() permettent une communication claire et efficace entre les composants, maintenant une structure organisée et réactive.