Aller au contenu
Angular Tutorials

Afficher une liste de tâches

Objectifs de ce chapitre

  • ✔️
    Découvrez la directive structurelle *ngFor
    Découvrez comment itérer sur une liste d'éléments dans un Template HTML à l'aide de la directive *ngFor.

Structure HTML

Pour afficher un tableau d’éléments, la structure HTML attendue est :

<table class="table">
  <thead>
    <tr>
        <th>Nom</th>
        <th>Date</th>
        <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Suivre le cours</td>
        <td>24/05/2024</td>
        <td></td>
    </tr>
    <tr>
        <td>Suivre le cours</td>
        <td>24/05/2024</td>
        <td></td>
    </tr>
  </tbody>
</table>
Un oiseau posé sur un nid d’œufs.

Cependant, que se passe-t-il si vous souhaitez afficher un tableau dynamique d’éléments évoluant au fil du temps ? Et si une nouvelle tâche est ajoutée ?

Vous voudrez vous appuyer sur la variable tasks pour afficher la bonne liste de tâches. Si les tâches sont mises à jour, la vue (Template HTML) doit également être mise à jour.

Directives Angular

Les Composants Angular sont des Directives Angular possédant un fichier HTML. Le but d’une Directive n’est pas d’afficher du contenu mais de manipuler le Template HTML d’un autre composant Angular. Ils peuvent aider à masquer/afficher dynamiquement certains contenus, à modifier leur style ou à affecter le nombre de fois qu’un contenu est affiché.

Directive structurelle *ngFor

Le nom *ngFor fait référence à for loop: son objectif est d’afficher une balise HTML donnée autant de fois qu’il y a d’éléments dans une liste fournie. Vous pouvez l’appliquer sur n’importe quelle balise HTML. Cela affectera cette balise et ses enfants.

Pour l’utiliser, nous ajoutons ce *ngFor sur la balise HTML. Elle attend une syntaxe arbitraire qui définit à la fois la liste et une référence à chaque élément de la liste. Cette syntaxe est let task of tasks :

  • tasks fait référence à la liste définie dans votre fichier composant.ts.

  • task est la référence pour utiliser la valeur de chaque élément de la liste (vous pouvez le nommer comme vous le souhaitez).

    <table class="table">
      <thead>
        <tr>
            <th>Nom</th>
            <th>Date</th>
            <th>Actions</th>
        </tr>
      </thead>
      <tbody>
    

        <tr *ngFor="let task of tasks">
            <td>Suivre le cours</td>
            <td>24/05/2024</td>
            <td></td>
        </tr>
      </tbody>
    </table>

🎓 Instructions

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

    task-list.component.html
    <table class="table">
        <thead>
        <tr>
            <th scope="col">Nom</th>
            <th scope="col">Date</th>
            <th scope="col">Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let task of tasks">
        <td>Suivre le cours</td>
        <td>24/05/2024</td>
        <td></td>
        </tr>
    </tbody>
    </table>

  2. Revenez à votre navigateur et consultez la page suivante :

Votre liste est maintenant affichée dans le navigateur. Vous devriez voir Task répétée autant de fois (2) qu’il y a de tâches dans la liste.

✔️ Ce que vous avez appris

Dans ce chapitre, vous avez appris à utiliser une liste d’éléments définis dans votre fichier composant.ts vers le fichier composant.html. Vous avez utilisé la directive structurelle *ngFor pour parcourir la liste des éléments et les afficher dans la vue (Template HTML). Une telle action est assez courante dans le développement Web et vous l’utiliserez probablement dans plusieurs de vos applications Angular.

🔗 Ressources