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

• src
  • main
    • app.component.html
    • app.component.ts

Examples

Le composant

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

<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 :

@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: une fonction pour suivre les éléments de manière unique, utile pour optimiser les performances.

La liste est vide avec @empty

@empty est utilisé pour afficher un contenu alternatif si la collection est vide. L'utilisation est la suivante :

@for (user of users(); track user.id) {
    // Votre code ici
}
@empty {
  <p>Aucun utilisateur trouvé</p>
}

Utiliser des variables dans le bloc @for

Vous pouvez également utiliser des variables dans le bloc @for pour suivre l'index de l'élément courant, comme ceci :

@for (user of users(); track user.id) {
    <p>{{user.name}} - {{$index}}</p>
}

Toutes les variables particulières commencent par $ et sont réservées pour les blocs @for. Voici d'autres exemples de variables spéciales :

• $index : l'index de l'élément courant dans la collection.
• $first : true si l'élément courant est le premier de la collection.
• $last : true si l'élément courant est le dernier de la collection.
• $even : true si l'index de l'élément courant est pair.
• $odd : true si l'index de l'élément courant est impair.
• $count : le nombre total d'éléments dans la collection.

Variables Locales

On peut aussi créer ses variables locales dans le bloc @for avec let:

@for (let user of users(); track user.id ; let i = $index) {
  <p>{{ i }}</p>
}

Exemple avec Liste d'Utilisateurs

<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 :

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

Utilisez @else if pour ajouter des conditions supplémentaires.

@if (condition1) {
  // Code à exécuter si condition1 est vraie
}
@else if (condition2) {
  // Code à exécuter si condition2 est vraie
}

Vous pouvez également utiliser @else pour exécuter un code alternatif si la condition est fausse.

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

Exemple avec Information Conditionnelle

@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 :

@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

@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:

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.