Sortie de Angular 21

Angular 21 représente une version fondamentale du framework front-end de Google. Publié fin 2025, il introduit des changements profonds dans l’architecture, une réactivité modernisée, un outillage optimisé pour les tests et la productivité, et une approche plus explicite de la détection de changements. Angular 21 s’impose comme une solution prête pour les applications d’entreprise, tout en améliorant l’expérience développeur grâce à des APIs plus ergonomiques et modernes.

Dans cet article, nous allons :

explorer en détail les nouveautés d’Angular 21 ;
illustrer chaque concept avec des exemples de code réels ;
présenter des bonnes pratiques professionnelles ;
expliquer pourquoi se former Angular est stratégique

Réactivité moderne avec `signals`, `computed`, et `effect`

L’une des évolutions majeures d’Angular 21 est l’adoption complète des signals comme base de réactivité interne.

Introduction aux `signals`

Un signal est une valeur réactive qui met à jour automatiquement l’interface dès qu’elle change, sans nécessiter de cycle de détection complexe.

Exemple simple

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

@Component({
  selector: 'app-counter',
  template: `
    <p>Valeur du compteur : {{ count() }}</p>
    <button (click)="increment()">Incrémenter</button>
    <button (click)="decrement()">Décrémenter</button>
  `,
})
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update(v => v + 1);
  }

  decrement() {
    this.count.update(v => v - 1);
  }
}

Ici, count est un signal. Chaque modification se reflète automatiquement dans la vue.

`computed` : valeurs dérivées réactives

computed permet de créer des valeurs dérivées qui se mettent à jour automatiquement lorsque leurs dépendances changent.

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-cart',
  template: `
    <p>Total articles : {{ totalItems() }}</p>
    <p>Prix total : {{ totalPrice() }} €</p>
  `,
})
export class CartComponent {
  items = signal([
    { name: 'Livre', price: 20, quantity: 2 },
    { name: 'Stylo', price: 2, quantity: 3 },
  ]);

  totalItems = computed(() =>
    this.items().reduce((acc, item) => acc + item.quantity, 0)
  );

  totalPrice = computed(() =>
    this.items().reduce((acc, item) => acc + item.price * item.quantity, 0)
  );
}

`effect` : effets secondaires contrôlés

Les effect permettent de déclencher des effets secondaires en réponse aux signaux.

import { Component, signal, effect } from '@angular/core';

@Component({
  selector: 'app-logger',
  template: ``,
})
export class LoggerComponent {
  count = signal(0);

  constructor() {
    effect(() => {
      console.log(`Le compteur vaut : ${this.count()}`);
    });
  }
}

Changement de détection sans Zone.js

Angular 21 propose par défaut une configuration sans Zone.js, ce qui améliore les performances et rend la détection de changements plus explicite et prévisible.

Désactiver Zone.js

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideZonelessChangeDetection } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideZonelessChangeDetection(),
  ],
});

Avec cette configuration, seules les mises à jour explicites via signals déclenchent le rendu.

Syntaxes de contrôle de flux améliorées : `@if`, `@for`

Angular 21 rend les templates plus expressifs et plus lisibles avec des syntaxes natives pour les structures de contrôle de flux.

Exemple : liste conditionnelle

@if (users().length === 0) {
  <p>Aucun utilisateur trouvé.</p>
} @else {
  <ul>
    @for (let user of users(); track user.id) {
      <li>{{ user.name }}</li>
    }
  </ul>
}

Ce format est plus concis et plus facile à lire que les anciennes directives *ngIf et *ngFor.

HttpClient simplifié et moderne

Angular 21 améliore l’accès au client HTTP tout en conservant une API fortement typée.

Exemple : appel API avec chargement

import { Component, inject, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-users',
  template: `
    @if (loading()) {
      <p>Chargement...</p>
    } @else {
      <ul>
        @for (let user of users(); track user.id) {
          <li>{{ user.name }}</li>
        }
      </ul>
    }
  `,
})
export class UsersComponent {
  private http = inject(HttpClient);
  users = signal<any[]>([]);
  loading = signal(true);

  ngOnInit() {
    this.http.get<any[]>('/api/users').subscribe(data => {
      this.users.set(data);
      this.loading.set(false);
    });
  }
}

Formulaires modernes avec `Signal Forms`

Angular 21 introduit une nouvelle API de formulaires Signal Forms basée sur la réactivité native.

Définition d’un formulaire

import { form, required, email, minLength } from '@angular/forms/signals';

export const loginForm = form(
  {
    email: '',
    password: '',
  },
  {
    email: [required(), email()],
    password: [required(), minLength(8)],
  }
);

Utilisation dans un composant

@Component({
  selector: 'app-login',
  template: `
    <form (submit)="submit()">
      <input
        type="email"
        [value]="loginForm.value.email()"
        (input)="loginForm.value.email.set($any($event.target).value)"
      />

      <input
        type="password"
        [value]="loginForm.value.password()"
        (input)="loginForm.value.password.set($any($event.target).value)"
      />

      <button [disabled]="loginForm.invalid()">Connexion</button>
    </form>
  `,
})
export class LoginComponent {
  submit() {
    if (loginForm.valid()) {
      console.log(loginForm.value());
    }
  }
}

Avantages de `Signal Forms`

réduction significative du boilerplate ;
validations réactives ;
intégration avec les outils de tests modernes.

Tests rapides avec Vitest

Angular 21 adopte Vitest comme moteur de test par défaut, remplaçant l’ancienne combinaison Karma/Jasmine.

Exemple de test Vitest pour un composant

import { describe, it, expect } from 'vitest';
import { CounterComponent } from './counter.component';

describe('CounterComponent', () => {
  it('incrémente le compteur', () => {
    const component = new CounterComponent();
    component.increment();
    expect(component.count()).toBe(1);
  });
});

Tests de formulaire

import { expect, it } from 'vitest';
import { loginForm } from './login.form';

it('devrait invalider un email incorrect', () => {
  loginForm.value.email.set('pas-un-email');
  expect(loginForm.invalid()).toBe(true);
});

Vitest est bien plus rapide que les anciens runners, ce qui réduit le temps de feedback lors du développement.

Accessibilité native avec Angular Aria

Angular 21 intègre Angular Aria, une bibliothèque qui simplifie la création de composants accessibles.

Exemple : bouton accessible

<button
  aria-label="Fermer la modale"
  (click)="close()"
>
  ✕
</button>

Angular Aria gère automatiquement :

la gestion du focus ;
les rôles ARIA ;
les comportements clavier.

L’accessibilité devient ainsi une partie de l’architecture UI plutôt qu’un ajout optionnel.

Bonnes pratiques Angular 21

Voici des recommandations concrètes pour des projets professionnels :

Utiliser signals pour l’état local et global plutôt que des objets complexes ou des Observables partout.
Favoriser Signal Forms pour les formulaires réactifs, surtout avec des validations lourdes.
Adopter la syntaxe zoneless pour optimiser la performance.
Structurer l’architecture par domaines (feature modules, services clairs).
Tester intensivement avec Vitest, incluant les scénarios UX complexes.
Intégrer Angular Aria dès la conception UI pour garantir l’accessibilité.
Automatiser le pipeline avec des tests et des builds optimisés.

Cas pratique : création d’un composant de recherche avec filtre réactif

Composant Search

import { Component, signal, effect } from '@angular/core';

@Component({
  selector: 'app-search',
  template: `
    <input
      type="text"
      placeholder="Rechercher..."
      (input)="searchQuery.set($any($event.target).value)"
    />

    <ul>
      @for (let item of filteredItems(); track item.id) {
        <li>{{ item.name }}</li>
      }
    </ul>
  `,
})
export class SearchComponent {
  searchQuery = signal('');
  items = signal([
    { id: 1, name: 'Angular' },
    { id: 2, name: 'React' },
    { id: 3, name: 'Vue' },
  ]);

  filteredItems = signal(this.items());

  constructor() {
    effect(() => {
      const query = this.searchQuery().toLowerCase();
      this.filteredItems.set(
        this.items().filter(item =>
          item.name.toLowerCase().includes(query)
        )
      );
    });
  }
}

Ce composant illustre la puissance des signaux :

recherche réactive ;
pas d’abonnement manuel ;
logique réactive encapsulée.

Etude de performance : disposer d’un pipeline Angular optimisé

Commande de build optimisé

ng build --configuration production

Angular 21 inclut automatiquement :

tree-shaking profond ;
minification avancée ;
optimisation des assets.

Structure de preload intelligent

Dans votre module de routing :

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./dashboard/dashboard.component').then(m => m.DashboardComponent),
    data: { preload: true }
  },
];

Angular 21 peut précharger intelligemment les composants à fort trafic, améliorant les TTFB et la réactivité dès l’ouverture de l’application.

Pourquoi se former à Angular 21

Angular 21 introduit une révolution dans la manière d’appréhender les applications Angular :

réactivité native avec signals ;
détection de changements zoneless ;
formulaires modernes ;
tooling de tests performant ;
accessibilité intégrée ;
meilleure expérience développeur globale.

Pour tirer pleinement parti de cette version, il est essentiel de suivre une formation structurée et complète, couvrant à la fois la théorie et la pratique.

👉 Découvrez la formation Angular de Dyma :
https://dyma.fr/formations/angular

Cette formation inclut :

des projets concrets ;
des exercices guidés ;
des cas réels de mise en production ;
de la pédagogie orientée performance et architecture.

Conclusion

Angular 21 est une version majeure qui va bien au-delà d’un simple rafraîchissement du framework. Elle pose les bases d’une programmation réactive moderne, améliore drastiquement l’expérience développeur, et prépare les applications Angular à affronter les défis des architectures complexes.

Les nouveautés comme les signals, les Signal Forms, la détection zoneless, l’intégration de Vitest et Angular Aria changent profondément notre manière de concevoir des applications front-end avec Angular.

Pour les développeurs souhaitant se spécialiser ou monter en compétences rapidement, une formation solide comme celle proposée par Dyma (https://dyma.fr/formations/angular) est un atout essentiel.

Réactivité moderne avec signals, computed, et effect

Introduction aux signals