Skip to content

Angular 17 : Exploration des Nouvelles Syntaxes de Contrôle de Flux

Angular 17 révolutionne la manière de gérer les rendus conditionnels et les listes. Pour comprendre pleinement le potentiel de cette mise à jour, explorons en détail les nouvelles syntaxes @for, @if et @switch.

Structure

Examples

Le composant

ts
import { Component, Signal, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

type UserType = {
  readonly id: number;
  name: string;
  isActive: boolean;
  additionalInfo: string;
  status?: 'active' | 'inactive';
};

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './user-list.component.html'
})
export class AppComponent {
  users: Signal<UserType[]> = signal([
    { id: 1, name: 'Alice', isActive: true, additionalInfo: 'Others Infos', status: 'active' },
    { id: 2, name: 'Bob', isActive: false, additionalInfo: 'Nothing' },
    { id: 3, name: 'Charlie', isActive: true, additionalInfo: 'Nothing' }
  ]);
}
import { Component, Signal, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

type UserType = {
  readonly id: number;
  name: string;
  isActive: boolean;
  additionalInfo: string;
  status?: 'active' | 'inactive';
};

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './user-list.component.html'
})
export class AppComponent {
  users: Signal<UserType[]> = signal([
    { id: 1, name: 'Alice', isActive: true, additionalInfo: 'Others Infos', status: 'active' },
    { id: 2, name: 'Bob', isActive: false, additionalInfo: 'Nothing' },
    { id: 3, name: 'Charlie', isActive: true, additionalInfo: 'Nothing' }
  ]);
}

Le template

html
<ul>
    @for (user of users(); track user.id;) {
        <li>
            {{user.name}}
            <input type="checkbox" [(ngModel)]="user.isActive" />
            @if (user.isActive) {
                <span> - {{user.additionalInfo}}</span>
            }
            <div>
                @switch (user.status) {
                    @case ('active') {
                      <span>Statut: Actif</span>
                    }
                    @case ('inactive') {
                      <span>Statut: Inactif</span>
                    }
                    @default {
                      <span>Statut: Inconnu</span>
                    }
                  }
            </div>
        </li>
    }
</ul>
<ul>
    @for (user of users(); track user.id;) {
        <li>
            {{user.name}}
            <input type="checkbox" [(ngModel)]="user.isActive" />
            @if (user.isActive) {
                <span> - {{user.additionalInfo}}</span>
            }
            <div>
                @switch (user.status) {
                    @case ('active') {
                      <span>Statut: Actif</span>
                    }
                    @case ('inactive') {
                      <span>Statut: Inactif</span>
                    }
                    @default {
                      <span>Statut: Inconnu</span>
                    }
                  }
            </div>
        </li>
    }
</ul>

1. La Syntaxe @for

Le bloc @for est utilisé pour itérer sur des collections, comme des listes ou des tableaux. La syntaxe générale ressemble à cela :

html
@for (variable of collection; trackByFunction;) {
  // Votre code ici
}
@for (variable of collection; trackByFunction;) {
  // Votre code ici
}
  • variable : représente l'élément courant de la collection lors de l'itération.
  • collection : la collection sur laquelle vous voulez itérer.
  • trackByFunction (optionnel) : une fonction pour suivre les éléments de manière unique, utile pour optimiser les performances.

Exemple avec Liste d'Utilisateurs

html
<ul>
@for (user of users(); track user.id;) {
  <li>{{user.name}}</li>
}
</ul>
<ul>
@for (user of users(); track user.id;) {
  <li>{{user.name}}</li>
}
</ul>

Ici, user est la variable courante, users() la collection, et user.id sert à suivre chaque élément de manière unique.

2. La Syntaxe @if

@if permet un rendu conditionnel dans vos templates. La structure de base est :

html
@if (condition) {
  // Code à exécuter si la condition est vraie
}
@if (condition) {
  // Code à exécuter si la condition est vraie
}

Exemple avec Information Conditionnelle

html
@if (user.isActive) {
  <span> - Utilisateur Actif</span>
}
@if (user.isActive) {
  <span> - Utilisateur Actif</span>
}

Dans cet exemple, le texte "Utilisateur Actif" n'apparaîtra que si user.isActive est vrai.

3. La Syntaxe @switch, @case et @default

Ces blocs sont utilisés pour exécuter différents morceaux de code en fonction de la valeur d'une expression. La structure ressemble à cela :

html
@switch (expression) {
  @case (value1) {
    // Code si expression == value1
  }
  @case (value2) {
    // Code si expression == value2
  }
  @default {
    // Code si aucune correspondance
  }
}
@switch (expression) {
  @case (value1) {
    // Code si expression == value1
  }
  @case (value2) {
    // Code si expression == value2
  }
  @default {
    // Code si aucune correspondance
  }
}

Exemple de Switch sur Statut d'Utilisateur

html
@switch (user.status) {
  @case ('active') {
    <span>Statut: Actif</span>
  }
  @case ('inactive') {
    <span>Statut: Inactif</span>
  }
  @default {
    <span>Statut: Inconnu</span>
  }
}
@switch (user.status) {
  @case ('active') {
    <span>Statut: Actif</span>
  }
  @case ('inactive') {
    <span>Statut: Inactif</span>
  }
  @default {
    <span>Statut: Inconnu</span>
  }
}

Dans cet exemple, selon la valeur de user.status, différents textes seront affichés.

Migration

Notez que les syntaxes @for, @if et @switch sont des ajouts à Angular 17. Si vous souhaitez migrer des syntaxes, utilisez la commande:

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

Conclusion

Avec Angular 17, les développeurs disposent de moyens plus intuitifs et expressifs pour contrôler le rendu dans leurs applications. Les syntaxes @for, @if et @switch rapprochent Angular des pratiques courantes dans les langages de programmation, rendant le code plus lisible et plus facile à maintenir.