Angular

Appearance

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

html
@for (user of users(); track user.id) {
    // Votre code ici
}
@empty {
  <p>Aucun utilisateur trouvé</p>
}
@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 :

html
@for (user of users(); track user.id) {
    <p>{{user.name}} - {{$index}}</p>
}
@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:

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

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
}

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

html
@if (condition1) {
  // Code à exécuter si condition1 est vraie
}
@else if (condition2) {
  // Code à exécuter si condition2 est vraie
}
@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.

html
@if (condition) {
  // Code à exécuter si la condition est vraie
}
@else {
  // Code à exécuter 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 ​

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.