Introduction à @let dans Angular 18.1 (11 juillet 2024)

La syntaxe des modèles d'Angular prend en charge des expressions JavaScript complexes, mais il n'y avait pas de moyen sans friction pour stocker le résultat d'une expression tout en étant capable de le réutiliser dans l'ensemble du modèle. Les développeurs ont dû recourir à des solutions non ergonomiques pour atteindre cet objectif avec des directives et d'autres solutions.

Voyons la nouvelle syntaxe dans les templates:

@let name = value; // où value est une expression Angular valide

Désormais, dans le modèle, une variable peut être définie et utilisée comme on pourrait s'y attendre selon les règles et conventions de la syntaxe des modèles Angular. Par exemple :

@let name = 'Frodo';
<h1>Tableau de bord pour {{name}}</h1>
Bonjour, {{name}}

Voici un autre exemple de comment @let peut être utilisé dans un modèle :

<!-- Utilisation avec une variable de modèle faisant référence à un élément -->
<input #name>

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

<!-- Utilisation avec un pipe asynchrone -->
@let user = user$ | async;

Lors de l'utilisation des nouvelles déclarations @let, gardez à l'esprit qu'elles sont limitées à la vue actuelle et à ses descendants, mais ne peuvent pas être accessibles par les vues parentes ou sœurs.

@let topLevel = value;

@if (condition) {
  @let nested = value;
}

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

<!-- Valide -->
{{topLevel}}
<!-- Erreur, non accessible depuis @if -->

{{nested}}
<!-- Erreur, non accessible depuis *ngIf -->

{{nestedNgIf}}

Les déclarations @let sont en lecture seule et ne peuvent pas être réassignées. Leurs valeurs seront recalculées à chaque détection de changement (par exemple, si un pipe asynchrone change). Toute tentative de leur attribuer une valeur directement entraînera une erreur de vérification de type.

@let value = 10;

<!-- Erreur : `value` n'est pas assignable -->
<button (click)="value = value + 1">Changer la valeur</button>

Définition de la syntaxe

Explorons certains détails de la définition de la syntaxe pour la syntaxe @let. La définition formelle de la nouvelle syntaxe est :

• Le mot-clé @let.
• Suivi d'un ou plusieurs espaces, sans inclure les nouvelles lignes.
• Suivi d'un nom JavaScript valide et de zéro ou plusieurs espaces.
• Suivi du symbole = et de zéro ou plusieurs espaces.
• Suivi d'une expression Angular qui peut être multi-lignes.
• Terminé par le symbole ;.

Source

Traduction de https://blog.angular.dev/introducing-let-in-angular-686f9f383f0f