Qu'est-ce que les Signals Angular ?

Question

Accepted Answer

**Signals** sont la primitive réactive d'Angular (ajoutée à partir d'Angular 16+) pour gérer l'état — un wrapper autour d'une valeur qui **notifie les consommateurs lorsqu'elle change**, permettant des mises à jour précises et efficaces sans dépendre de la détection de changement Zone.js. ## Créer et utiliser un signal ```ts import { signal, computed, effect } from "@angular/core"; export class CounterComponent { count = signal(0); // a writable signal double = computed(() => this.count() * 2); // derived signal (auto-updates) increment() { this.count.set(this.count() + 1); // set a new value this.count.update(c => c + 1); // or update based on current } constructor() { effect(() => { console.log(`count is now ${this.count()}`); // re-runs when count changes }); } } ``` ## Lire un signal : l'appeler comme une fonction ```html ``` Notez que les signals sont **lus en les appelant** (`count()`), pas comme des propriétés simples. Dans le template, Angular suit précisément quels signals une vue lit, donc seules les parties affectées se mettent à jour quand un signal change. ## Les trois types de signals ```text signal(value) → writable state, updated via .set() / .update() computed(() => ...) → derived/cached value; auto-recomputes when its deps change effect(() => ...) → runs a side effect whenever read signals change ``` `computed` est lazy et mis en cache (comme le computed de Vue) ; `effect` exécute les effets secondaires de manière réactive (comme un watcher). ## Pourquoi c'est important : réactivité précise ```text Traditional Angular: a change triggers checking the WHOLE component tree (Zone.js) Signals: Angular knows EXACTLY which views depend on a changed signal → update only those → far more efficient, and enables "zoneless" Angular ``` Les signals donnent à Angular un **suivi de dépendances précis** — quand un signal change, seules les vues et les computeds qui le lisent réellement se mettent à jour. C'est plus efficace que la détection de changement large que Zone.js déclenche, et c'est la base pour supprimer complètement Zone.js (mode zoneless). ## Signal-based inputs (plus récent) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Pourquoi c'est important Les signals sont l'évolution réactive la plus significative récente d'Angular — un modèle plus simple, plus explicite et bien plus efficace que la détection de changement implicite Zone.js. Ils permettent des mises à jour précises, réduisent les vérifications inutiles, s'intègrent proprement avec computed/effect, et ouvrent la voie à un Angular zoneless. Comprendre les signals est de plus en plus essentiel, car Angular oriente le nouveau développement vers eux comme primitive d'état par défaut.