O que são Angular Signals?

Question

Accepted Answer

**Signals** são o primitivo reativo do Angular (adicionado no Angular 16+) para gerenciar estado — um wrapper em torno de um valor que **notifica os consumidores quando muda**, permitindo atualizações fine-grained e eficientes sem depender da detecção de mudanças Zone.js. ## Criando e usando um 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 }); } } ``` ## Lendo um signal: chame-o como uma função ```html ``` Note que signals são **lidos chamando-os** (`count()`), não como propriedades simples. No template, Angular rastreia exatamente quais signals uma view lê, portanto apenas as partes afetadas são atualizadas quando um signal muda. ## Os três tipos de signal ```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` é lazy e cacheado (como computed do Vue); `effect` executa efeitos colaterais reativamente (como um watcher). ## Por que signals importam: reatividade fine-grained ```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 ``` Signals dão ao Angular **rastreamento de dependência preciso** — quando um signal muda, apenas as views e computeds que realmente o leem são atualizadas. Isso é mais eficiente do que a detecção de mudanças ampla que Zone.js dispara e é a base para remover completamente Zone.js (modo sem zonas). ## Inputs baseados em signal (mais recente) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Por que isso importa Signals são a evolução mais significativa recente na reatividade do Angular — um modelo mais simples, explícito e muito mais eficiente do que a detecção de mudanças implícita de Zone.js. Eles permitem atualizações fine-grained, reduzem verificações desnecessárias, se integram perfeitamente com computed/effect e abrem caminho para o Angular sem zonas. Compreender signals é cada vez mais essencial, pois o Angular está direcionando o novo desenvolvimento para eles como o primitivo de estado padrão.