Appearance
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
Le bloc @for
est utilisé pour itérer sur des collections, comme des listes ou des tableaux. La syntaxe générale ressemble à cela :
angular-html
@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 :
angular-html
@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 :
angular-html
@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
:
angular-html
@for (user of users; track user.id ; let i = $index) {
<p>{{ i }}</p>
}
2. La Syntaxe @if
@if
permet un rendu conditionnel dans vos templates. La structure de base est :
angular-html
@if (condition) {
// Code à exécuter si la condition est vraie
}
Utilisez @else if
pour ajouter des conditions supplémentaires.
angular-html
@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.
angular-html
@if (condition) {
// Code à exécuter si la condition est vraie
}
@else {
// Code à exécuter si la condition est fausse
}
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 :
angular-html
@switch (expression) {
@case (value1) {
// Code si expression == value1
}
@case (value2) {
// Code si expression == value2
}
@default {
// Code si aucune correspondance
}
}
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