Introduction à la syntaxe @let dans Angular 18.1

Tout savoir sur la nouvelle syntaxe @let dans Angular 18.1

Avec la version 18.1 d'Angular, il y a une petite nouveauté qui va rendre la vie des développeurs beaucoup plus facile. Il s'agit de la syntaxe @let dans les templates. Avant cette mise à jour, lorsqu’on voulait définir une variable dans le HTML et la réutiliser dans tout le template, il fallait jongler avec des solutions un peu compliquées. Maintenant, avec @let, tout devient plus simple et plus naturel !

1. Qu'est-ce que @let et pourquoi c'est utile ?

Imaginez que vous voulez créer une variable dans votre template pour stocker une valeur ou un résultat d'une expression, et pouvoir l’utiliser plusieurs fois dans votre HTML. Avant, c’était pas évident de faire ça de façon propre, mais avec @let, c’est désormais possible ! Vous pouvez définir une variable directement dans votre template et l'utiliser comme n’importe quelle autre variable dans le code Angular. Plus besoin de passer par du TypeScript ou des directives compliquées.

Par exemple, vous pouvez faire ça :

@let name = 'Frodo';

Et ensuite, utilisez la variable partout dans votre template :

<h1>Bienvenue, {{name}}</h1>

C’est simple, non ?

2. Quelques exemples concrets de @let

Voyons à quoi ça ressemble dans un vrai template :

Exemple 1 : Une variable simple avec une valeur statique

@let name = 'Frodo';

Ensuite, vous pouvez réutiliser cette variable partout dans le template :

<h1>Bienvenue sur votre tableau de bord, {{name}}</h1>

Exemple 2 : Utilisation avec un élément DOM

<input #name>

@let greeting = 'Bonjour ' + name.value;

Ici, la variable greeting est définie à partir de la valeur d'un input, et vous pouvez l'utiliser comme bon vous semble dans le template.

Exemple 3 : Avec un pipe asynchrone

@let user = user$ | async;

Si vous récupérez des données de manière asynchrone, par exemple via un Observable, vous pouvez utiliser @let pour définir une variable qui contiendra la valeur une fois que les données seront disponibles.

3. Points importants à retenir sur @let

Avant de vous lancer à fond, voici quelques détails à garder en tête :

• Portée limitée : Une variable définie avec @let ne sera disponible que dans le template actuel et ses éléments enfants. Si vous essayez de l’utiliser dans une autre vue ou un autre bloc, ça ne fonctionnera pas.
• Lecture seule : Une fois que vous avez défini une variable avec @let, vous ne pouvez pas la modifier directement. Elle est recalculée automatiquement à chaque changement de données, mais vous ne pouvez pas lui attribuer une nouvelle valeur dans le template. Si vous essayez de le faire, Angular vous le dira avec une erreur.

Exemple de portée limitée

@let topLevel = value;

<if (condition)> @let nested = value; </if>

<div *ngIf="condition"> @let nestedNgIf = value; </div>

Dans cet exemple :

• topLevel est accessible partout dans le template, mais nested ne le sera que dans le bloc *ngIf où elle est définie.
• Et nestedNgIf ne pourra être utilisé que dans le *ngIf où vous l'avez défini.

Erreur de réassignation

@let value = 10;

Si vous essayez de faire ça dans votre template :

<button (click)="value = value + 1">Changer la valeur</button>

Vous aurez une erreur, car les variables définies avec @let sont en lecture seule.

4. Syntaxe de @let : simple comme bonjour

La syntaxe est super simple, et voilà comment vous pouvez définir une variable :

• Commencez par @let, suivi d’un espace.
• Ensuite, donnez un nom valide à la variable.
• Utilisez un signe égal (=) pour affecter une valeur à la variable.
• Terminez par un point-virgule (;) pour bien fermer la déclaration.

@let name = 'Frodo';

C'est aussi simple que ça !

5. Conclusion : Plus besoin de se prendre la tête avec les templates !

Avec @let, la gestion des variables dans vos templates Angular devient un jeu d'enfant. Vous pouvez définir des variables directement dans vos templates, les utiliser à volonté, et tout ça sans avoir à écrire des lignes et des lignes de code TypeScript ou à manipuler des directives complexes. C'est plus simple, plus propre et plus agréable à utiliser.

Alors, qu’attendez-vous pour l’essayer dans vos projets Angular ? Profitez-en pour améliorer vos templates et rendre votre code encore plus facile à maintenir et à comprendre !