Introduction

Avec l'arrivée d'Angular 18.1, cette version introduit une nouvelle fonctionnalité intéressante dans le compilateur : la possibilité de déclarer une ou plusieurs variables de modèle.
Comment cette fonctionnalité est-elle utilisée et quels sont les différents cas d’utilisation ?

Cet article a pour but de répondre.

La dernière fonctionnalité du compilateur : @let

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

C'est ainsi que la nouvelle syntaxe du flux de contrôle est née

• @si
• @pour
• @changer

et, plus récemment, @let

En règle générale, le moyen le plus simple de créer une variable de modèle était d'utiliser le

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

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

• @if avec le mot-clé comme

  {{ user.name }}



@if(user$ |async; as user){
  
{{ user.name }}
}

Cette fonctionnalité pratique nous a permis de stocker le résultat du canal asynchrone dans une variable pour une utilisation ultérieure dans le modèle.

Cependant, cette syntaxe soulève quelques questions. Ici, la condition vérifie si le retour du canal asynchrone 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 particulièrement le chiffre 0

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

C'est là qu'intervient @let.

@let ne vérifie pas une condition, il permet simplement de déclarer une variable de modèle locale de manière simple

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

@let myNumber = (numbers$ | async) ?? 0;
{{ myNumber }}

De cette façon, la variable myNumber sera toujours affichée.

Les différentes manières d'utiliser @let

L'un des scénarios les plus classiques avec déclaration de variable 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. Cette variable ne sera réévaluée que si l'une de ses dépendances change. Donc appeler une fonction n’est pas une mauvaise idée pour des expressions telles qu’une expression complexe.

@for(user of users(); track user.id) { @let isAdmin = checkIfAdmin(user);
• User is admin: {{ isAdmin }}
}

Utilisez le @let avec les signaux

@let est compatible avec les signaux et est utilisé comme suit

@let userColor = user().preferences?.colors?.primaryColor || 'white';
user favorite color is {{ userColor }}

@let et expression javascript

Comme vous pouvez le constater, @let peut être utilisé pour évaluer tout type d'expression javascript, hormis par exemple 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.

  
    @for (score of scores(); track $index) {
        @let total = total   score, max = calcMax(score);
        
final score: {{ total }}
    }

D'autres choses sympas que @let apporte

Comme décrit ci-dessus, le comportement de @let est très similaire au comportement de let en javascript, qui présente les avantages suivants

• la portée fonctionne comme la portée let en javascript
• meilleure interférence de frappe dans le modèle
• une erreur est générée si une variable (let) est utilisée avant d'être déclarée