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

Voir la documentation ici.

2. La Syntaxe @if

Voir la documentation ici.

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

Voir la documentation ici.