Aller au contenu
S'identifier S’abonner
Angular — Web — Front

Angular 18.1 : découvrez la puissance de @let pour simplifier vos templates

Avec la version 18.1 d'Angular, une nouvelle fonctionnalité révolutionnaire fait son apparition : @let. Découvrez comment l'utiliser et ses divers cas d'usage.

,   and  Nicolas Frizzarin
3 lecture min
Avec @Let, déclarez une ou plusieurs variables de template.

Introduction

Avec l'arrivée de la version 18.1 d'Angular, une nouvelle fonctionnalité passionnante pour le compilateur fait son apparition : la possibilité de déclarer une ou plusieurs variables de template grâce à la syntaxe @let. Comment utilise-t-on cette fonctionnalité, et quels sont les différents cas d'usage ?

Cet article a pour but de répondre à ces questions.

La dernière fonctionnalité @let

Avec les dernières versions d'Angular, l'équipe a introduit de nouvelles fonctionnalités dans le compilateur, et ces fonctionnalités se traduisent par la syntaxe @-syntax.

C'est ainsi que la syntaxe du nouveau contrôle de flux d'Angular est apparue, permettant de gagner quelques KB lors du build d'une application Angular n'utilisant plus les directives structurelles built-in du framework.

Pour rappel, la syntaxe du nouveau contrôle de flux d'Angular est la suivante :

  • @if --> ngIf
  • @for --> ngFor
  • @switch / @case --> ngSwitch / ngSwitchCase

et, plus récemment, @let

Utilisation de la syntaxe @let

En règle générale, la manière la plus simple de créer une variable de template est d'utiliser:

  • la directive structurelle *ngIf avec le mot-clé as keyword

ou en utilisant la nouvelle syntaxe de flux de contrôle

  • @if avec le mot clé as
<!-- older control flow syntax -->
<div *ngIf="user$ |async as user">
  {{ user.name }}
</div>

<!-- new control flow syntax -->
@if(user$ |async; as user){
  <div>{{ user.name }}</div>
}

Cette fonctionnalité pratique permet de stocker le résultat du pipe async dans une variable qui sera utilisée plus tard dans le template.

Cependant, cette syntaxe soulève quelques questions. Ici, la condition vérifie si le retour du pipe async est vrai, et donc si la valeur de retour est différente de toute valeur considérée comme fausse en JavaScript. Cette condition fonctionnera très bien si le retour est un objet ou un tableau, mais si le retour est un nombre, et en particulier le nombre 0 ?

Les limitations de la syntaxe @if

La condition pour afficher ce genre de nombre serait la suivante :

@if(((numbers$ |async) !=== undefined || (numbers$ |async) !=== null) ; as myNumber){
  <div>{{ myNumber }}</div>
}

Introduction de @let

C'est là que @let intervient. @let ne vérifie pas de condition, il vous permet simplement de déclarer une variable locale de template d'une manière simple.

L'exemple de code ci-dessus devient donc beaucoup plus simple et plus élégant :

@let myNumber = (numbers$ | async) ?? 0;
<div>{{ myNumber }}</div>

De cette façon, nous sommes sûrs que la variable de template myNumber sera toujours affichée sans utiliser de trick ou workaround.

Les différentes façons d'utiliser @let

L'un des scénarios les plus classiques en matière de déclaration de variables consiste à stocker le résultat d'une expression complexe. Il a toujours été déconseillé d'utiliser une fonction dans une condition. L'utilisation d'une fonction dans une condition avait un impact sur les performances dans le sens où au moindre mouvement de souris, ou changement de modèle, la fonction était réévaluée.

@let, comme décrit ci-dessus, n'évalue pas, mais déclare simplement une variable locale de template. Cette variable ne sera réévaluée que si l'une de ses dépendances change. L'appel à une fonction n'est donc pas une mauvaise idée pour des expressions complexes.

<ul>
  @for(user of users(); track user.id) {
    @let isAdmin = checkIfAdmin(user);
   <li>User is admin: {{ isAdmin }}</li>
  }
</ul>

Utilisation de @let avec les signals

@let est compatible avec les signaux et s'utilise comme suit :

```html
@let userColor = user().preferences?.colors?.primaryColor || 'white';
<span>user favorite color is {{ userColor }}</span>
```

@let et les expressions JavaScript

Comme vous pouvez le constater, @let peut être utilisé pour évaluer n'importe quel type d'expression JavaScript, à l'exception, par exemple, de l'instanciation d'une classe. De cette manière, les opérateurs arithmétiques sont interprétés et plusieurs variables peuvent être déclarées sur plusieurs lignes différentes ou sur une seule ligne.

<div>  
    @for (score of scores(); track $index) {
        @let total = total + score, max = calcMax(score);
        <h1>final score: {{ total }}</h1>
    }
</div>

Les autres avantages d'@let

Comme décrit ci-dessus, le comportement de @let est très similaire à celui de let en JavaScript, ce qui présente les avantages suivants :

  • La portée fonctionne comme la portée let en JavaScript
  • Meilleure interférence de typage dans le modèle
  • Une erreur est levée si une variable (let) est utilisée avant d'être déclarée

Conclusion

La nouvelle syntaxe @let d'Angular 18.1 offre une manière élégante et performante de déclarer des variables de template. Elle simplifie le code, améliore la lisibilité et optimise les performances en évitant des réévaluations inutiles. Adoptez @let pour rendre vos templates Angular plus propres et plus efficaces.

Lié

Dernier