Maîtriser @switch dans les templates Angular

@switch est un nouveau contrôle de flux introduit dans Angular pour remplacer la directive *ngSwitch. Cette nouvelle syntaxe offre une approche plus claire et plus performante pour gérer les conditions multiples dans vos templates.

Compatibilité

@switch est une syntaxe introduite dans Angular 17. Si vous utilisez une version antérieure, vous devez utiliser *ngSwitch.

Migration

Si vous souhaitez migrer des syntaxes, utilisez la commande:

ng g @angular/core:control-flow-migration

Exemple de base

user-role.component.ts

import { Component } from '@angular/core';
import { User } from './user';

@Component({
  selector: 'app-user-role',
  standalone: true,
  template: `
    <h2>Panneau utilisateur</h2>
    @switch (userRole) {
      @case ('admin') {
        <div class="admin-panel">
          <h3>Panneau Administrateur</h3>
          <p>Accès complet au système</p>
        </div>
      }
      @case ('manager') {
        <div class="manager-panel">
          <h3>Panneau Manager</h3>
          <p>Accès à la gestion d'équipe</p>
        </div>
      }
      @default {
        <div class="user-panel">
          <h3>Panneau Utilisateur</h3>
          <p>Accès limité</p>
        </div>
      }
    }
  `
})
export class UserRoleComponent {
  userRole: string = 'admin';
}

user.ts

export interface User {
    id: number;
    name: string;
    username?: string;
    email: string;
    address?: {
        street: string;
        suite: string;
        city: string;
        zipcode: string;
        geo: {
            lat: string;
            lng: string;
        }
    };
    phone?: string;
    website?: string;
    company?: {
        name: string;
        catchPhrase: string;
        bs: string;
    };
}

Syntaxe générale

Structure de base

La structure complète d'un @switch comprend :

@switch (expression) {
  @case (valeur1) {
    // Code pour valeur1
  }
  @case (valeur2) {
    // Code pour valeur2
  }
  @default {
    // Code par défaut
  }
}