Affichez un message quand la liste est vide

Objectifs de ce chapitre

• ✔️
  Affichez un contenu HTML conditionné

  Découvrez comment utiliser la directive *ngIf pour afficher un contenu HTML conditionné.

Vous venez d’apprendre comment supprimer une tâche de la liste, vous voulez maintenant afficher un message quand la liste est vide.

La directive *ngIf

Pour itérer sur la liste de tâche, vous avez utilisé la directive *ngFor. C’est une directive structurelle : elle permet d’ajouter, supprimer ou manipuler des élèments du DOM.

Une autre directive structurelle est la directive *ngIf. Elle permet de conditionner l’affichage d’un élèment dans la vue.

En lui donnant une condition, l’élèment n’est construit et afficher que si la condition est true.

🎓 Instructions

1. Modifiez le fichier src/app/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>
   
   <p *ngIf="!tasks.length">Pas de tâche</p>

Testons le !

1. Supprimez toutes les tâches de la liste.
2. Le message “Pas de tâche” devrait s’afficher.

✔️ Ce que vous avez appris

Dans ce chapitre, vous avez appris comment utiliser la directive *ngIf.