Lors de la création d'interfaces utilisateur pour des applications web, nous rencontrons souvent des scénarios tels que « Afficher une liste d'éléments si elle est disponible, ou montrer un espace réservé si elle est vide. » Dans Angular, ces tâches sont gérées à l'aide des directives structurelles — des outils puissants qui contrôlent ce qui est rendu dans le template et à quel moment.

Contrairement aux attributs HTML classiques, les directives structurelles ne se contentent pas de modifier le comportement d'un élément — elles changent réellement la structure du DOM en ajoutant ou supprimant des éléments entiers.

Directive structurelle NgFor

Supposons que vous disposiez d'une liste de tâches dans notre TaskListComponent. Chaque tâche doit être affichée avec ses propres éléments d'interface : un bouton de suppression, un bouton pour changer le statut, etc. Écrire chaque tâche manuellement dans le HTML serait inefficace et difficile à maintenir à mesure que les données évoluent.

tasks = [
  { id: 1, title: 'Buy groceries', completed: false },
  { id: 2, title: 'Walk the dog', completed: true },
  { id: 3, title: 'Learn Angular', completed: false }
];

Angular propose la directive *ngFor, qui permet d’itérer sur un tableau et de générer automatiquement un élément HTML pour chaque élément du tableau.

<task-component *ngFor="let task of tasks"></task-component>

Ici, *ngFor="let task of tasks" indique à Angular : « Pour chaque tâche dans le tableau tasks, créer un <task-component>** »**. Si le tableau contient 3 tâches, Angular affichera 3 instances distinctes de task-component, chacune avec ses propres données. Cela rend l’interface utilisateur plus évolutive et élimine le code répétitif.

Fonctionnalités supplémentaires de ngFor

En plus de l'itération de base, *ngFor prend en charge plusieurs variables de contexte utiles auxquelles vous pouvez accéder directement dans la directive à l'aide de let.

Voici un récapitulatif rapide :

Voici un exemple utilisant certaines d'entre elles :

<task-component
  *ngFor="let task of tasks; let i = index; let odd = odd"
  [task]="task"
  [class.odd]="odd">
</task-component>

Dans cet exemple, la variable odd est utilisée pour appliquer une classe CSS à chaque ligne alternative, rendant la liste visuellement plus facile à parcourir.

Directive structurelle NgIf

Examinons le fonctionnement du rendu conditionnel à l'aide d'un exemple simple de liste de tâches. L'objectif est d'afficher la liste si elle contient des tâches, et si elle est vide, d'afficher un message tel que "Aucune tâche pour le moment".

Dans Angular, la directive *ngIf permet d'afficher ou de masquer des éléments de manière conditionnelle. Bien qu'elle ressemble à un attribut HTML classique, elle effectue en réalité bien plus d'opérations en arrière-plan.

<div *ngIf="tasks.length > 0">Task List</div>

Lorsque Angular traite *ngIf, il réécrit le modèle en arrière-plan. Au lieu d'afficher directement l'élément, il l'encapsule dans un <ng-template>, et ne l'ajoute au DOM que si la condition est true.

<ng-template [ngIf]="tasks.length > 0">
  <div>Task List</div>
</ng-template>

Si la condition s'évalue à false (c'est-à-dire tasks.length === 0), Angular ne rend pas l'élément du tout — il est complètement absent du DOM.

Mais que faire si vous souhaitez afficher un message de secours au lieu de simplement masquer le contenu ? C'est là que la clause else de *ngIf devient utile. Elle permet de référencer un modèle alternatif à l'aide d'un <ng-template> avec une étiquette personnalisée.

Voici ce qui se passe :

• Angular vérifie d'abord si le tableau tasks contient des éléments ;

• S'il en contient, il rend le <div> avec les composants de tâche ;

• Si le tableau est vide, il utilise le modèle #noTasks et affiche le message : "No tasks yet 😊".

Cela rend vos modèles beaucoup plus clairs et facilite la gestion des états vides de manière conviviale.