Ajouter un commentaire

Angular v22 : les nouveaux formulaires, ARIA, OnPush

Par:

francoistonic

ven, 05/06/2026 - 14:51

Angular v22 est disponible en version finale. Le projet propose toujours son Update Guide. Celui-ci propose 3 niveaux de complexité de l'application Angular (basic, medium, advanced). À chaque niveau, le guide de mise à jour fournit les points à changer ou à vérifier pour assurer une transition vers la v22.

Update guide : https://angular.dev/update-guide?v=21.0-22.0&l=3

Les principales nouveautés

- nettoyage dans les API historiques

- Signal Forms est déclaré stable. A terme, il remplacera Reactive Forms

/**
* Getting started with Signal Forms
**/
import {signal} from "@angular/core"
import {form} from "@angular/forms/signals"

@Component({
selector: 'app-payment',
imports: [FormField],
templateURL: './app-payment.html',
})
class Payment {
readonly paymentModel = signal({
paymentType: '',
amount: 0
});
readonly f = form(paymentModel,
schema => {
required(schema.paymentType, {
message: 'Required field'
});
});
}

- Aria : le support d'Aria, pour l'accessibilité, est déclaré stable et disponible pour l'ensemble des primitives UI. En tout 12 patterns UI sont disponibles pour les usages communs.

Installation : npm install @angular/aria

Exemple sur une toolbar menu, en TypeScript :

import {Component} from '@angular/core';

import {Toolbar, ToolbarWidget, ToolbarWidgetGroup} from '@angular/aria/toolbar';

@Component({

selector: 'app-root',

templateUrl: 'app.html',

styleUrl: 'app.css',

imports: [Toolbar, ToolbarWidget, ToolbarWidgetGroup],

})

export class App {}

Comme l'exemple de la documentation, dans ce scénario, il faut considérer : la navigation par clavier, les lecteurs d'écran, la lecture de droite à gauche.

Doc : https://angular.dev/guide/aria/overview

- la nouvelle fonction injectAsync() pour injecter des dépendances de manière asynchrone.

- poursuivre les efforts autour d'Angular AI. Un des objectifs est d'aider à la génération des projets Angular depuis des outils IA / les agents comme Antigravity. L'équipe améliore régulièrement le MCP pour inclure de nouveaux outils. Les Agent skills pour Angular sont là pour donner un contexte Angular plus précis, par exemple, en proposant des skills sur Aria et les Signal Forms

- TypeScript 6 est supporté. Quid de TypeScript 7 qui utilisera Go ?

- OnPush par défaut. Cette évolution doit permettre de mieux détecter les changements dans un composant. Le second élément pour faciliter la détection des changements : ChangeDetectionStrategy.Eager (nouveau nom de ChangeDetectionStrategy.Default). Ce changement de nom doit apporter plus de clarté sur l'impact quand des changements sont généralisés dans le code.

Pour en savoir plus : https://github.com/angular/angular/discussions/66779

- Incremental Hydration (hydratation progressive) : L'hydratation progressive est une technique avancée qui permet d'optimiser les performances de votre application Angular avec SSR en hydratant progressivement les différentes parties de votre interface plutôt que tout d'un coup. Ce fonctionnement est maintenant par défaut.

- support des commentaires dans les éléments HTML

Avertissement : Angular 22.0.0 introduit aussi de nombreuses casses de codes et de dépréciations. Par exemple : withFetch et reportProgress sont dépréciés. Voir le changelog 22.0.0 : https://github.com/angular/angular/blob/main/CHANGELOG.md

Annonce complète : https://blog.angular.dev/announcing-angular-v22-c52bb83a4664

Ajouter un commentaire

Ajouter un commentaire

Angular v22 : les nouveaux formulaires, ARIA, OnPush

Filtered HTML

Plain text