¿Qué son los Angular Signals?

Question

Accepted Answer

**Signals** son los primitivos reactivos de Angular (añadidos en Angular 16+) para gestionar el estado — un wrapper alrededor de un valor que **notifica a los consumidores cuando cambia**, habilitando actualizaciones refinadas y eficientes sin depender de la detección de cambios de Zone.js. ## Crear y usar una señal ```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 }); } } ``` ## Leer una señal: llámala como una función ```html ``` Ten en cuenta que las señales **se leen llamándolas** (`count()`), no como propiedades simples. En la plantilla, Angular rastrea exactamente qué señales lee una vista, por lo que solo las partes afectadas se actualizan cuando cambia una señal. ## Los tres tipos de señal ```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` es perezoso y cacheado (como el computed de Vue); `effect` ejecuta efectos secundarios de forma reactiva (como un watcher). ## Por qué importan las señales: reactividad refinada ```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 ``` Los Signals le dan a Angular **seguimiento preciso de dependencias** — cuando una señal cambia, solo se actualizan las vistas y los computed que realmente la leen. Esto es más eficiente que la amplia detección de cambios que desencadena Zone.js, y es la base para eliminar completamente Zone.js (modo sin zona). ## Entradas basadas en señales (más reciente) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Por qué es importante Los Signals son la evolución más significativa reciente en la reactividad de Angular — un modelo más simple, explícito y mucho más eficiente que la detección de cambios implícita de Zone.js. Habilitan actualizaciones refinadas, reducen comprobaciones innecesarias, se integran limpiamente con computed/effect y allanan el camino para Angular sin zona. Comprender las señales es cada vez más esencial, ya que Angular está dirigiendo el nuevo desarrollo hacia ellas como el primitivo de estado predeterminado.