Angular 17 a introduit une nouvelle identité visuelle, un nouveau site web angular.dev, ainsi que de nombreuses autres fonctionnalités.

Aujourd’hui, concentrons-nous sur les nouvelles syntaxes de contrôle de flux disponibles dans les templates HTML d’Angular.

Nouvelle syntaxe “If — then — else”

La directive ngIf et sa syntaxe else étaient souvent source de confusion :

<div *ngIf="condition; else alternateContent">
  Contenu affiché lorsque la condition est vraie.
</div>
<ng-template #alternateContent>
  Contenu affiché lorsque la condition est fausse.
</ng-template>

Angular 17 introduit une syntaxe plus propre et lisible :

<div>
  @if (condition) {
    Contenu affiché lorsque la condition est vraie.
  } @else {
    Contenu affiché lorsque la condition est fausse.
  }
</div>

Cette syntaxe est plus concise et lisible. De plus, elle prend en charge l’option else if :


@if (a > b) {
  {{a}} est supérieur à {{b}}
} @else if (b > a) {
  {{a}} est inférieur à {{b}}
} @else {
  {{a}} est égal à {{b}}
}

Nouvelle syntaxe de boucle “for”

La directive ngFor peut être remplacée par une syntaxe similaire :

@for (element of elements; track element.id) {
  {{ element.name }}
}

Le paramètre « track » est obligatoire, mais contrairement à trackBy de ngFor , il utilise une propriété de l’objet plutôt qu’une fonction.

Les variables contextuelles de ngFor sont toujours disponibles, permettant d’obtenir l’index ou d’autres informations sur l’élément :

@for (element of elements; track element.id; let idx = $index, e = $even) {
  Élément #{{ idx }} : {{ element.name }}
}

Une nouveauté est la possibilité de définir un template alternatif si le tableau est vide grâce au bloc @empty :

@for (element of elements; track element.name) {
  <li> {{ element.name }} </li>
} @empty {
  <li> Aucun élément disponible. </li>
}

Nouvelle syntaxe “switch — case”

La directive ngSwitch et sa syntaxe compliquée peuvent désormais être remplacées par une version plus simple :

<div [ngSwitch]="currentView">
  <p *ngSwitchCase="'home'">Affichage de la page d'accueil</p>
  <p *ngSwitchCase="'about'">Affichage de la page À propos</p>
  <p *ngSwitchCase="'contact'">Affichage de la page Contact</p>
  <p *ngSwitchDefault>Page non sélectionnée</p>
</div>

Avec Angular 17, voici la nouvelle syntaxe :

@switch (currentView) {
  @case ('home') {
    <p>Affichage de la page d'accueil</p>
  }
  @case ('about') {
    <p>Affichage de la page À propos</p>
  }
  @default {
    <p>Page non sélectionnée</p>
  }
}

À retenir

Malgré ces nouvelles syntaxes disponibles avec Angular 17, il est important de noter que :

• Les directives héritées comme ngIf, ngFor, et ngSwitch ne sont pas dépréciées et resteront disponibles.
• Vous pouvez utiliser les deux syntaxes dans votre application Angular 17+ si vous le souhaitez.
• Une commande de migration automatique via Angular CLI est disponible pour remplacer la syntaxe héritée : ng g @angular/core:control-flow.
• Au-delà de la syntaxe, l’équipe Angular a constaté jusqu’à 90 % d’amélioration des performances avec la nouvelle syntaxe et une amélioration moyenne de 30 % sur le dépôt Angular Material.

Ce n’est qu’un aperçu des nouveautés d’Angular 17. Restez à l’écoute pour plus de détails sur les autres fonctionnalités.