Angular
Control Flow

Le Sélecteur (@switch)

Plutôt que d'écrire une longue suite de conditions complexes (Si c'est A fait ceci, Si c'est B fait cela...), Angular propose @switch pour évaluer une variable et afficher un HTML spécifique selon son contenu.

Choisissez un Rôle
userRole = "admin"

Accès Dieu (Administrateur)

Vous avez tous les droits. Vous pouvez modifier, supprimer et détruire le système.

La Structure

La variable est évaluée une seule fois en haut du bloc, puis Angular cherche le @case correspondant. Le @default sert de filet de sécurité si aucun cas ne correspond :

@switch (variable) {

  @case ('valeur-1') {
    <div> Affiche le design 1 </div>
  }

  @case ('valeur-2') {
    <div> Affiche le design 2 </div>
  }

  @default {
    <div> Si on n'a rien trouvé au-dessus, affiche ceci. </div>
  }
}

Le Code Source Complet

switch-role.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-user-role',
  template: `
    @switch (userRole) { 
      
      @case ('admin') {
        <h3>Panneau Administrateur</h3>
      } 
      
      @case ('manager') {
        <h3>Panneau Manager</h3>
      } 
      
      @default {
        <h3>Panneau Utilisateur par défaut</h3>
      } 

    }
  `
})
export class RoleComponent {
  userRole: string = 'admin';
}