Exploration des des syntaxes des contrôles 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.

Exemple complet

Le composant

user-list.component.ts

import { Component } 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: UserType[] = [
    { 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' }
  ];
}

user-list.component.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>

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; track ...;) {
  // 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.
• track: indique à Angular comment suivre les éléments de la collection. Cela permet à Angular de mettre à jour correctement les éléments de la liste lorsqu'ils changent.

Comprendre track

track est une expression qui prend un argument et retourne une valeur unique pour chaque élément de la collection. Cela permet à Angular de suivre les éléments de manière efficace. Si on n'avait pas track, Angular devrait comparer chaque élément de la collection pour détecter les changements, ce qui serait inefficace. Ici, si vous avez une liste d'utilisateurs, vous pouvez utiliser user.id comme argument pour track pour suivre chaque utilisateur par son identifiant unique. Dans le cas où vous n'avez pas de valeur unique, vous pouvez utiliser $index pour suivre les éléments par leur index dans la collection.

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

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
}

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

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