Introduction aux signals Angular

À retenir — Un signal est une valeur réactive : quand elle change, Angular sait exactement quoi mettre à jour dans l'interface, sans relire toute l'application comme le faisait Zone.js.

Les signals sont la nouvelle façon de gérer la réactivité dans Angular (stables depuis Angular 17, enrichis dans Angular 18 et 19). Ils remplacent progressivement le couple historique « Zone.js + détection de changement globale » par un système explicite, fin et performant. Dans cette formation, vous allez les apprendre de zéro, avec à chaque étape une démo exécutable en direct que vous pouvez modifier dans votre navigateur.

Qu'est-ce qu'un signal ?

Un signal est un conteneur autour d'une valeur qui prévient les consommateurs intéressés lorsque cette valeur change. On le lit en l'appelant comme une fonction :

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

const compteur = signal(0); // crée un signal initialisé à 0

console.log(compteur());     // lecture → 0
compteur.set(5);             // écriture → la valeur devient 5
console.log(compteur());     // lecture → 5

Trois idées suffisent à comprendre 90 % du modèle :

1. Lire un signal, c'est l'appeler : compteur().
2. Écrire dans un signal writable : compteur.set(...) ou compteur.update(...).
3. Tout ce qui lit un signal pendant son exécution (un template, un computed, un effect) devient automatiquement dépendant de lui et se met à jour quand il change.

Pourquoi Angular a introduit les signals ?

Le problème : la détection de changement globale

Historiquement, Angular utilise Zone.js pour détecter quand « quelque chose a peut-être changé » (un clic, un timer, une requête HTTP). À chaque événement, Angular re-vérifie l'arbre entier des composants pour voir ce qui doit être réaffiché. C'est simple mais coûteux : sur une grande application, on recalcule beaucoup de choses inutilement.

La solution : une réactivité fine et explicite

Avec les signals, Angular construit un graphe de dépendances. Quand un signal change, le framework sait précisément quelles vues et quels calculs en dépendent, et ne met à jour qu'eux.

graph TD
    A[signal: prix] --> C[computed: total]
    B[signal: quantite] --> C
    C --> D[Vue: affichage du total]
    A --> E[Vue: affichage du prix]

Si seul prix change, Angular recalcule total et rafraîchit les deux vues concernées — rien d'autre. C'est ce qui ouvre la voie aux applications « zoneless » (sans Zone.js), plus légères et plus rapides, abordées au chapitre 8.

Les trois primitives à connaître

Nous consacrons un chapitre à chacune. Voici un premier aperçu réunissant les trois :

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

const prix = signal(10);
const quantite = signal(2);

// Valeur dérivée : recalculée seulement quand prix ou quantite change.
const total = computed(() => prix() * quantite());

// Effet de bord : se relance à chaque changement de total.
effect(() => console.log('Nouveau total :', total()));

prix.set(15); // déclenche le recalcul de total puis l'effect → log "Nouveau total : 30"

Signals ou RxJS : faut-il choisir ?

Non — ils sont complémentaires. Les signals excellent pour l'état synchrone qui pilote l'affichage (un compteur, un formulaire, une sélection). RxJS reste le meilleur outil pour les flux asynchrones et événementiels (frappe clavier avec debounce, websockets, orchestration de requêtes). Le chapitre 7 montre comment les faire dialoguer avec toSignal() et toObservable().

Ce que vous allez construire

Au fil des chapitres, vous écrirez et exécuterez : un compteur réactif, un panier avec total calculé, une bascule de thème, des composants parent-enfant communiquant par signals, un chronomètre branché sur RxJS, une liste de tâches, et enfin un service de state partagé prêt pour la production.

Prérequis

• Bases d'Angular (composant, template, liaison de données).
• Notions de TypeScript (types, interfaces, fonctions fléchées).
• Angular 17+ installé (les démos de cette formation ciblent Angular 19).

Au chapitre suivant, on entre dans le concret avec le signal writable : création, lecture, set, update, et affichage dans un template.