Maîtriser @for dans les templates Angular

@for est un nouveau contrôle de flux introduit dans Angular pour remplacer la directive *ngFor. Cette nouvelle syntaxe offre une approche plus intuitive pour itérer sur des collections dans vos templates. Explorons ensemble comment utiliser @for pour améliorer la lisibilité et l'efficacité de vos boucles dans Angular.

Compatibilité

@for est une syntaxe introduite dans Angular 17. Si vous utilisez une version antérieure, vous pouvez utiliser *ngFor comme d'habitude.

Migration

Si vous souhaitez migrer des syntaxes, utilisez la commande:

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

Exemple de base

users.component.ts

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

@Component({
  selector: 'app-users',
  standalone: true,
  template: `
    <h2>Liste des utilisateurs</h2>
    @for (user of users; track user.id) {
      <div>
        {{ user.name }} ({{ user.email }})
      </div>
    }
    @empty {
      <p>Aucun utilisateur trouvé</p>
    }
  `
})
export class UsersComponent {
  users: User[] = [
    { id: 1, name: 'Alice', username: 'alice123', email: '[email protected]' },
    { id: 2, name: 'Bob', username: 'bob456', email: '[email protected]' },
    { id: 3, name: 'Charlie', username: 'charlie789', email: '[email protected]' }
  ];
}

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

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 (user of users; track user.id ; let i = $index) {
  <p>{{ i }}</p>
}