Lors de la création d'interfaces utilisateur pour des applications web, nous sommes souvent confrontés à 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 types de tâches sont gérés à l'aide des directives structurelles — des outils puissants qui contrôlent ce qui est affiché 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 ayez une liste de tâches dans votre 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 lorsque les données changent.

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

Angular fournit 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.

<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. Cette approche 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 accessibles 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, ce qui rend 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. Vous souhaitez afficher la liste si elle contient des tâches, et si elle est vide, 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 remplacement 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 affiche 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.