Ajouter un bouton supprimer dans le TaskListComponent

Objectifs de ce chapitre

• ✔️
  Supprimez une tâche

  Ajoutez un bouton supprimer dans le TaskListComponent pour supprimer la tâche dans la liste.

Le bouton supprimer

Modifions le TaskListComponent pour ajouter un bouton supprimer à côté de chaque tâche de la liste. Quand l’utilisateur clique sur ce bouton, la tâche sera supprimée de la liste.

🎓 Instructions

1. Modifiez le fichier src/app/task-list/task-list.component.html.

   task-list.component.html

    <tr *ngFor="let task of tasks">
        <td>{{ task.title }}</td>
        <td>{{ task.createdAt | date }}</td>
        <td>
            <a class="btn btn-primary" [routerLink]="['/update', task.id]">Mettre à jour</a>
   
            <button class="btn btn-danger" type="button" (click)="deleteTask(task.id)">Supprimer</button>
        </td>
    </tr>

La fonction deleteTask

Créons une fonction deleteTask dans le TaskListComponent pour supprimer une tâche de la liste. Cette fonction appelera la fonction deleteTask de TaskService crée dans le chapitre précédent pour supprimer une tâche de la liste.

🎓 Instructions

1. Modifiez le fichier src/app/task-list/task-list.component.ts.

   import { Component } from '@angular/core';
   import { TaskService } from '../task.service';
   
   @Component({
     selector: 'app-task-list',
     templateUrl: './task-list.component.html',
     styleUrls: ['./task-list.component.css']
   })
   export class TaskListComponent {
     tasks: Task[] = this.taskService.tasks;
   
     constructor(private taskService: TaskService) { }
   
     deleteTask(id: string): void {
       this.taskService.deleteTask(id);
     }
   }

Testons le !

1. Cliquez sur le bouton supprimer à côté d’une tâche dans la liste.
2. Cette tâche devrait être supprimée de la liste.

✔️ Ce que vous avez appris

Dans ce chapitre, vous avez ajouté une fonction pour supprimer une tâche.