Découvrez les nouveautés d'Angular 20 en quelques minutes

Angular 20 arrive avec plusieurs nouveautés et stabilisation des API: Zoneless, les APIs resource() et httpResource(), un nouveau runner de tests, etc. La vidéo vous donne un aperçu de ces nouveautés.

Abonnez-vous à notre chaîne

Pour profiter des prochaines vidéos sur Angular, abonnez-vous à la nouvelle chaîne YouTube !

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

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

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' }
  ];
}
angular-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.