Tout savoir sur la nouvelle syntaxe @let dans Angular 18.1
Avec la version 18.1 d’Angular, une nouvelle fonctionnalité fait son apparition pour simplifier la vie des développeurs : la syntaxe @let. Jusqu’à présent, déclarer une variable dans un template et la réutiliser plusieurs fois demandait des solutions parfois lourdes. Grâce à @let, c’est désormais plus simple et plus naturel !
1. Qu’est-ce que @let et pourquoi c’est utile ?
Lorsque vous souhaitez stocker une valeur ou le résultat d’une expression dans un template Angular, il fallait souvent passer par du TypeScript ou utiliser des directives comme *ngIf ou *ngFor. Avec @let, plus besoin de ces contournements !
Désormais, vous pouvez simplement déclarer une variable directement dans le template et l’utiliser plusieurs fois sans complexité.
Exemple minimaliste :
@let name = ‘Frodo’;
<h1>Bienvenue, {{ name }}</h1>
Plus simple, plus lisible, et plus efficace !
2. Quelques exemples concrets d’utilisation
🔹 Exemple 1 : Variable statique
@let name = ‘Frodo’;
<h1>Bienvenue sur votre tableau de bord, {{ name }}</h1>
🔹 Exemple 2 : Utilisation avec un élément DOM
<input #name>
@let greeting = ‘Bonjour ‘ + name.value;
<p>{{ greeting }}</p>
👉 Ici, la variable greeting récupère dynamiquement la valeur de l’input.
🔹 Exemple 3 : Utilisation avec un Observable (pipe async)
@let user = user$ | async;
<p>Utilisateur connecté : {{ user?.name }}</p>
👉 @let permet d’extraire directement la valeur d’un Observable sans devoir utiliser *ngIf="user$ | async as user".
3. Ce qu’il faut savoir sur @let
🔹 Portée limitée
- Une variable définie avec
@letest accessible uniquement dans le template où elle est déclarée et ses enfants. - Elle ne peut pas être utilisée dans une autre vue ou un autre bloc.
Exemple :
@let topLevel = value;
<if (condition)>
@let nested = value; <!– Cette variable ne fonctionne que dans ce bloc –>
</if>
<div *ngIf= »condition »>
@let nestedNgIf = value; <!– Accessible uniquement dans ce div –>
</div>
🔹 Lecture seule
- Une fois une variable déclarée avec
@let, elle ne peut pas être modifiée directement dans le template. - Elle est recalculée automatiquement à chaque mise à jour des données.
Exemple d’erreur :
@let value = 10;
<button (click)= »value = value + 1″>Changer la valeur</button> <!– Erreur –>
👉 Angular renverra une erreur, car value est en lecture seule.
4. La syntaxe @let en détail
La déclaration suit une syntaxe ultra simple :
✅ Structure de base :
@let variable = expression;
✅ Règles à respecter :
- Nom valide pour la variable.
- Expression assignée après le
=(peut être une valeur statique ou une expression dynamique). - Point-virgule
;obligatoire en fin de déclaration.
Exemple :
@let userName = ‘Alice’;
@let total = price * quantity;
5. Conclusion : un vrai gain de simplicité !
Avec @let, Angular simplifie la gestion des variables dans les templates :
✅ Plus besoin d’utiliser *ngIf ou *ngFor pour déclarer des variables.
✅ Moins de logique déportée dans le TypeScript, le code devient plus clair et lisible.
✅ Idéal pour les expressions complexes, les données asynchrones et les templates dynamiques.
Alors, prêt à intégrer @let dans vos projets Angular ? 🚀