Angular 21 : Nouveautés majeures à l’horizon

Cette nouvelle version met clairement l’accent sur la modernisation, la performance et l’expérience développeur. Au menu :

• les Signal Forms, une nouvelle approche radicale des formulaires;
• la disparition progressive de NgClass et NgStyle;
• le mode sans Zone.js activé par défaut;
• le remplacement de Karma/Jasmine par Vitest pour les tests;
• un nouveau package Angular ARIA pour booster l’accessibilité.

Voyons tout ça de plus près.

Signal Forms : des formulaires enfin réactifs et simples

C’est la grande star d’Angular 21 : les Signal Forms. Si tu as déjà passé des heures à manipuler des FormGroup et FormControl, cette nouveauté va te simplifier la vie.

Les Signal Forms s’appuient sur la logique de signals introduite dans Angular 16. Chaque champ de formulaire devient un signal : un état réactif qui se met à jour automatiquement. D’après Angular.fr, cette approche permet d’éliminer presque tous les subscribe manuels et la gestion complexe des états.

En pratique, ça donne quoi ? :

• Les champs, erreurs et statuts deviennent réactifs par nature.
• Le typage est plus fort et le code bien plus léger.
• La migration reste progressive, tu peux conserver tes anciens formulaires à côté.

Avec un exemple, c’est mieux ! :

<input type="text" [field]="crewForm.name" placeholder="Nom">

Ici, crewForm.name est un signal. Dès que tu modifies le champ, le signal se met à jour, et inversement. Tu peux aussi afficher sa valeur (crewForm.name().value()) ou vérifier sa validité (crewForm.name().invalid()) directement dans le template.

Cette innovation résout ce que Tomasz Swiatowski décrit sur Medium comme « le problème historique des formulaires Angular ». Moins de code, moins de complexité, et une réactivité naturelle : Angular s’aligne enfin avec la philosophie moderne du reactive programming.

Notons que les Signal Forms sont encore marqués comme expérimentaux. Leur API pourrait encore évoluer d’ici Angular 22, mais tout indique qu’ils deviendront la norme très vite.

Envie de comprendre les nouveautés du framework phare de Google ? Notre formation Angular vous guide pas à pas pour créer des applications modernes, performantes et maintenables, tout en maîtrisant Signal Forms, le mode sans Zone.js et les tests avec Vitest.

L’équipe Ambient IT

Angular 21 dit adieu à NgClass et NgStyle, place à la simplicité

Deux vétérans du framework vont bientôt disparaître : NgClass et NgStyle.

Ces directives existaient depuis Angular 2 pour appliquer dynamiquement des classes et des styles, mais elles font doublon avec les liaisons de propriétés modernes ([class.nom], [style.prop]). L’équipe Angular a donc annoncé leur dépréciation progressive, comme confirmé dans l’article de l’iJS Conference.

Pas de panique : des outils de migration automatiques sont fournis. Par exemple :

ng generate @angular/core:ngclass-to-class

transformera :

<div [ngClass]="{'highlight': condition}">

en :

<div [class.highlight]="condition">

C’est plus clair, plus lisible et plus performant. Même principe pour NgStyle, remplacé par [style] ou des [style.prop] bindings.
Ce changement allège le framework, simplifie les templates et rapproche Angular des standards natifs du Web.

Angular 21 sans Zone.js : un bond en performance

C’est sans doute le changement le plus structurel : Angular 21 désactive Zone.js par défaut.
Depuis les débuts du framework, Zone.js servait à détecter automatiquement les changements de l’interface après un événement (clic, requête HTTP, promesse, etc.).

Le problème ? Ce système était puissant, mais un peu lourd. Angular 21 introduit donc le mode zoneless, expliqué plus en détail dans l’article de iJS Conference.

Ce que ça change :

• Angular ne surveille plus tous les événements d’un navigateur.
• Les changements sont détectés uniquement quand c’est nécessaire.
• Résultat : moins de cycles rendu inutiles pour de meilleures performances.

Ce que ça apporte :

• Bundle plus léger car Zone.js n’est plus embarqué,
• UI plus réactive,
• Debugging plus simple,
• Compatibilité accrue avec les nouvelles APIs web.

Les nouveaux projets Angular 21 seront zoneless par défaut, mais il sera toujours possible d’activer ou désactiver ce mode selon les besoins. Les anciens projets peuvent migrer progressivement via les outils de configuration fournis.

Ce mode sera certainement la base du moteur de changement de détection futur du framework.

Angular 21 adopte Vitest comme nouveau standard de test

Adieu Karma et Jasmine ! Angular 21 passe à Vitest, le framework de tests moderne basé sur Vite. C’est un changement massif, réclamé depuis longtemps par la communauté et officialisé par l’équipe d’Angular

Pourquoi c’est une bonne nouvelle ?

• Les tests sont bien plus rapides.
• La configuration est plus simple et intégrée.
• Vitest supporte nativement TypeScript et les modules ES.
• Il est compatible avec les outils modernes comme Jest.

En clair, le développeur Angular gagne un environnement de test à la fois plus fluide et plus performant, sans changer ses habitudes (ng test fonctionne toujours).

Les anciens projets peuvent rester sur Jasmine/Karma, mais pour les nouveaux, Vitest sera désormais le standard par défaut.

Angular ARIA et autres nouveautés bienvenues

Angular 21 apporte aussi de petites améliorations très appréciables, détaillées sur le blog d’Angular.

• Angular ARIA : un nouveau package “headless” qui ajoute automatiquement les bons rôles ARIA à des composants accessibles (accordéons, listes, tabs, radio groups, etc.). Plus besoin de passer par Angular Material pour avoir des comportements conformes.
• HttpClient par défaut : fini les imports manuels du HttpClientModule. il est désormais inclus automatiquement dans les nouveaux projets.
• Support de Tailwind CSS intégré : le CLI propose une commande pour configurer Tailwind dès la création du projet.
• Scripts de migration CLI : plusieurs commandes facilitent la mise à jour vers Angular 21 (ngclass-to-class, migration CommonModule vers standalone, etc.).

Ces ajouts renforcent la cohérence du framework et améliorent l’expérience de développement au quotidien.

Conclusion

Angular 21 n’est pas une simple MaJ, c’est un vrai tournant. Les Signal Forms simplifient la gestion des formulaires à un niveau inédit, le mode sans Zone.js accélère tout en rendant le framework plus léger, la fin de NgClass/NgStyle clarifie le code et Vitest modernise enfin l’expérience de test.

En somme :

• Angular continue d’innover sans rompre la compatibilité,
• Les migrations sont facilitées,
• La productivité des équipes s’en trouve renforcée.

Ces nouveautés montrent qu’Angular reste un framework solide, qui avance avec son temps, plu rapide, plus simple et plus agréable à développer. C’est donc peut-être le bon moment pour te former sur ces nouvelles pratiques dès maintenant.