Lab 14: Standalone & Control Flow

📖 Ressources

• Documentation Control Flow
• Composants Standalone

🚀 Code de Départ

step-12-album-wholesale-v21-pre-control-flow

Il s’agit d’une application standalone v21 qui utilise encore l’ancienne syntaxe des directives structurelles (*ngIf, *ngFor, [ngSwitch]). Votre mission est de moderniser les templates en les convertissant vers la nouvelle syntaxe de contrôle de flux intégrée, introduite dans Angular 17.

Dans ce lab, vous allez remplacer les directives structurelles d’Angular par la nouvelle syntaxe Control Flow. Vous convertirez *ngIf en @if/@else, *ngFor en @for avec track, et [ngSwitch] en @switch/@case.

📝 Instructions

Étape 1: Remplacer *ngIf par @if

<!-- Avant -->
<div *ngIf="loading">Loading...</div>

<!-- Après -->
@if (loading) {
  <div>Loading...</div>
}

Avec else:

@if (loading) {
  <div>Loading...</div>
} @else {
  <div>Content</div>
}

Étape 2: Remplacer *ngFor par @for

<!-- Avant -->
<div *ngFor="let album of albums; trackBy: trackByFn">
  {{ album.name }}
</div>

<!-- Après -->
@for (album of albums; track album.id) {
  <div>{{ album.name }}</div>
}

Étape 3: Remplacer [ngSwitch] par @switch

<!-- Avant -->
<div [ngSwitch]="status">
  <span *ngSwitchCase="'active'">Active</span>
  <span *ngSwitchDefault>Inactive</span>
</div>

<!-- Après -->
@switch (status) {
  @case ('active') { <span>Active</span> }
  @default { <span>Inactive</span> }
}