CHAPITRE 9 : LES DIRECTIVES : NGIF, NGFOR, NGCLASS

Les directives ajoutent du comportement au HTML : afficher sous condition, répéter un élément, changer une classe. Ce sont les outils que vous utiliserez le plus souvent.

1. Deux familles

• Les directives structurelles modifient la structure du DOM : elles ajoutent ou retirent des éléments. Elles s'écrivent avec une étoile : *ngIf, *ngFor.
• Les directives d'attribut modifient l'apparence d'un élément existant : ngClass, ngStyle.

2. *ngIf : afficher sous condition

<p *ngIf="estConnecte">Bienvenue !</p>
<p *ngIf="!estConnecte">Veuillez vous connecter.</p>

Avec un bloc else :

<div *ngIf="etudiants.length > 0; else aucunEtudiant">
  <p>{{ etudiants.length }} etudiant(s) inscrit(s).</p>
</div>

<ng-template #aucunEtudiant>
  <p>Aucun etudiant pour le moment.</p>
</ng-template>

Point important : *ngIf supprime l'élément du DOM, il ne le masque pas. Si vous voulez seulement le cacher tout en le conservant, utilisez [hidden] ou le CSS.

3. *ngFor : parcourir une liste

export class ListeComponent {
  etudiants = [
    { nom: 'Awa',   moyenne: 15.5 },
    { nom: 'Brice', moyenne: 9.0  },
    { nom: 'Chantal', moyenne: 17.2 }
  ];
}

<ul>
  <li *ngFor="let etudiant of etudiants">
    {{ etudiant.nom }} : {{ etudiant.moyenne }}/20
  </li>
</ul>

Les variables utiles

<li *ngFor="let e of etudiants; let i = index; let premier = first">
  {{ i + 1 }}. {{ e.nom }}
  <span *ngIf="premier">(major)</span>
</li>

Disponibles : index, first, last, even, odd.

trackBy : pour les longues listes

<li *ngFor="let e of etudiants; trackBy: suivreParId">{{ e.nom }}</li>

suivreParId(index: number, etudiant: any): number {
  return etudiant.id;
}

Sans trackBy, Angular reconstruit toute la liste au moindre changement. Avec, il ne touche que ce qui a bougé. Inutile sur dix éléments, précieux sur mille.

4. ngClass et ngStyle

<p [ngClass]="{ 'admis': moyenne >= 10, 'ajourne': moyenne < 10 }">
  {{ nom }}
</p>

<p [ngStyle]="{ 'color': moyenne >= 10 ? 'green' : 'red',
                'font-weight': 'bold' }">
  {{ moyenne }}/20
</p>

Préférez ngClass à ngStyle : le style reste alors dans la feuille CSS, là où il doit être.

5. ngSwitch : plusieurs cas

<div [ngSwitch]="mention">
  <p *ngSwitchCase="'excellent'">Felicitations du jury</p>
  <p *ngSwitchCase="'bien'">Tres bon travail</p>
  <p *ngSwitchDefault>Poursuivez vos efforts</p>
</div>

6. Une règle à connaître

On ne peut pas mettre *ngIf et *ngFor sur le même élément. Utilisez un <ng-container>, qui n'ajoute aucune balise au rendu :

<ng-container *ngFor="let e of etudiants">
  <li *ngIf="e.moyenne >= 10">{{ e.nom }}</li>
</ng-container>

À retenir

• L'étoile signale une directive structurelle
• *ngIf retire l'élément du DOM, il ne le masque pas
• *ngFor répète ; trackBy l'optimise sur les longues listes
• Jamais *ngIf et *ngFor ensemble : ng-container