exploration des nouvelles systaxes de contrôle de flux
Angular 17 apporte une révolution dans la gestion des rendus conditionnels et des listes grâce à l’introduction de nouvelles syntaxes telles que @for, @if et @switch. Pour appréhender pleinement les possibilités offertes par cette mise à jour, examinons de près ces nouvelles constructions.
Structure :
src
main
app.component.html
app.component.ts
Exemples :
Dans le app.component.ts
import { Component, Signal, signal } 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: Signal<UserType[]> = signal([
{
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’ }
]);
}
dans le app.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>
La syntaxe @for
@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; trackByFunction;) {
// Votre code ici
}
variable: représente l’élément courant de la collection lors de l’itération.
collection : bla collection sur laquelle vous voulez itérer.
trackByFunction(optionnel) : une fonction pour suivre les éléments de manière unique, utile pour optimiser les performances.
Voici un exemple avec la liste d’utilisateurs :
<ul>
@for (user of users(); track user.id;) {
<li>{{user.name}}</li>
}
</ul>
Ici user est la variable, users() la collection et user.id sert à suivre chaque élément de manière unique.
La syntaxe @if
@if permet un rendu conditionnel dans vos templates. La structure de base est :
@if (condition) {
// Code à exécuter si la condition est vraie
}
Voici ici un exemple avec une information conditionnelle
@if (user.isActive) {
<span> – Utilisateur Actif</span>
}
Dans cet exemple, le texte « Utilisateur Actif » n’apparaîtra que si user.isActive est vrai.
La syntaxe @switch, @case, @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 :
@switch (expression) {
@case (value1) {
// Code si expression == value1
}
@case (value2) {
// Code si expression == value2
}
@default {
// Code si aucune correspondance
}
}
Voici un exemple avec le statut d’utilisateur
@switch (user.status) {
@case (‘active’) {
<span>Statut: Actif</span>
}
@case (‘inactive’) {
<span>Statut: Inactif</span>
}
@default {
<span>Statut: Inconnu</span>
}
}
Dans cet exemple, selon la valeur de user.status, différents textes seront affichés.
En conclusion, Angular 17 offre aux développeurs des moyens plus intuitifs et expressifs pour gérer le rendu dans leurs applications. Les nouvelles syntaxes @for, @if et @switch rapprochent Angular des conventions courantes dans les langages de programmation, améliorant ainsi la lisibilité et facilitant la maintenance du code.