Ho, cette partie n'est plus d'actualité ! 👀

Attention, *ngIf, *ngFor et *ngSwitch sont obsolètes. Utilisez les contrôles de flux comme @if, @for ou @switch. C'est beaucoup plus simple et plus lisible. Pour en savoir plus, consultez Contrôles de flux.

Utiliser la directive *ngSwitch

Préalablement: Ajoutons CommonModule

Pour utiliser cette directive, vous devez d'abord inclure CommonModule dans votre composant :

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-mon-composant',
  template: `
    <!-- Mettez ici le template de votre composant -->
  `,
  standalone: true,
  imports: [
    CommonModule
  ],
})
export class MyComponent { }

Si vous mettez pas le module, vous aurez l'erreur suivante: Can't bind to '<nom de la directive>' since it isn't a known property of 'div'

Proche de la directive ngIf, la directive ngSwitch permet d'afficher un élément selon la valeur d'une variable. Prenons un exemple classique : la création d'onglets :

import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <ul class="nav nav-tabs">
      <li [ngClass]="{active: tab==1}" (click)="tab=1"><a href="#">Home</a></li>
      <li [ngClass]="{active: tab==2}" (click)="tab=2"><a href="#">Profile</a></li>
      <li [ngClass]="{active: tab==3}" (click)="tab=3"><a href="#">Messages</a></li>
    </ul>
    <div [ngSwitch]="tab">
      <div *ngSwitchCase="1">Content 1</div>
      <div *ngSwitchCase="2">Content 2</div>
      <div *ngSwitchCase="3">Content 3</div>
      <div *ngSwitchDefault>Default</div>
    </div>
  `
})
export class AppComponent {
  tab: number = 1;
}

Nous utilisons BootStrap pour un visuel plus jolie. Le principe est simple :

• ngSwitch prend la valeur de la valeur tab
• tab change selon l'onglet cliqué
• ngSwitchCase fait une comparaison avec sa valeur et la valeur de ngSwitch. Si l'égalité est positive alors l'élément s'affiche.
• ngSwitchDefault affiche l'élément si aucun des ngSwitchCase n'est positif.

Nous initialisons tab à 1 pour être sur le premier onglet lors de l'affichage du composant.