Contexte

En mai 2024, Angular a publié sa version 18, apportant plusieurs nouveautés marquantes. Quelques mois plus tard, les versions mineures 18.1 et 18.2 ont suivi, introduisant des améliorations et de nouvelles fonctionnalités supplémentaires.

La directive @let

Avec Angular 18.1, une nouvelle fonctionnalité très attendue a fait son apparition : la directive @let. Elle permet aux développeurs de déclarer des variables directement dans les templates HTML des composants, facilitant la réutilisation des valeurs dans le code, sans avoir à retourner dans le TypeScript.

Exemple d’utilisation de @let

@let maxInputLength = 100; 
<input [(ngModel)]="username" [maxlength]="maxInputLength" />

Dans cet exemple, @let permet de définir une variable maxInputLength qui sera utilisée pour limiter le nombre de caractères d’un champ d’entrée.

Utilisation dynamique avec des références de templates

Une autre capacité intéressante de @let est qu’il peut être utilisé avec des références de templates pour capturer des valeurs et les manipuler dynamiquement. Par exemple :

<input #emailInput name="email" [maxlength]="maxLength" /> 
@let emailValue = emailInput.value;

Cette approche simplifie la gestion des références d’éléments dans un template Angular et offre une flexibilité accrue pour les développeurs.

@let avec des Observables

Auparavant, gérer les valeurs asynchrones, telles que celles provenant d’observables, nécessitait l’utilisation de hacks comme ngIf pour récupérer ces valeurs. Avec @let, cela devient beaucoup plus simple et propre :

@let userData = userData$ | async; 
@for (user of userData; track user.id) { 
    <div>{{ user.name }}</div> 
} @empty { 
    <div>Aucun utilisateur trouvé</div> 
}

Dans cet exemple, on utilise @let pour obtenir des données asynchrones et les utiliser dans une boucle @for pour afficher une liste d’utilisateurs.

Variables @let en lecture seule

Il est important de noter que les variables définies avec @let sont en lecture seule, mais leur valeur sera recalculée à chaque détection de changement dans Angular. Cela permet une gestion flexible et réactive des données, tout en offrant une meilleure structure au code.

Nouveaux schémas de migration

Migration vers le chargement paresseux pour les composants autonomes

Angular 18.2 introduit un nouveau schéma pour convertir les routes des composants autonomes afin qu’elles soient chargées de manière paresseuse (lazy loading), ce qui améliore considérablement les performances des applications. Voici la commande pour effectuer cette migration :

ng g @angular/core:route-lazy-loading

Migration des injections de dépendances vers inject()

La nouvelle version prend également en charge l’injection de dépendances via la fonction inject(), qui offre une alternative plus concise et flexible aux injections via les constructeurs. Angular propose maintenant un schéma de migration pour convertir automatiquement les injections existantes vers ce nouveau format :

ng g @angular/core:inject-migration

Une fois la migration terminée, il est recommandé d’utiliser un outil comme Prettier pour nettoyer les lignes de code inutiles générées pendant la migration.

Schémas de migration existants

Voici quelques schémas de migration déjà disponibles dans Angular :

Contrôle du flux de template

Angular a introduit un schéma pour faciliter le contrôle du flux dans les templates avec la nouvelle syntaxe de contrôle de flux :

ng g @angular/core:control-flow

Utilisation du nouveau builder d’applications

Le nouveau builder d’applications est également disponible pour une migration facile :

ng update @angular/cli --name use-application-builder

Conversion de composants en standalone

Pour convertir vos composants traditionnels en composants autonomes (standalone), vous pouvez utiliser ce schéma :

ng g @angular/core:standalone

Conclusion

Les versions 18.1 et 18.2 d’Angular apportent des fonctionnalités qui simplifient la gestion des templates et améliorent les performances des applications Angular, avec des nouveautés comme la directive @let et les nouveaux schémas de migration. Ces ajouts renforcent l’efficacité des développeurs tout en préparant le terrain pour les futures versions majeures, dont Angular 19 prévue pour novembre 2024.