Cosa sono i Segnali Angular?

Question

Accepted Answer

**Signals** sono la primitiva reattiva di Angular (aggiunta in Angular 16+) per gestire lo stato — un wrapper intorno a un valore che **notifica i consumatori quando cambia**, abilitando aggiornamenti efficienti e granulari senza affidarsi al change detection di Zone.js. ## Creazione e utilizzo di 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 }); } } ``` ## Lettura di un signal: chiamarlo come una funzione ```html ``` Nota che i signal vengono **letti chiamandoli** (`count()`), non come proprietà ordinarie. Nel template, Angular traccia esattamente quali signal una vista legge, quindi solo le parti interessate si aggiornano quando un signal cambia. ## I tre tipi di 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 cachato (come il computed di Vue); `effect` esegue effetti collaterali reattivamente (come un watcher). ## Perché è importante: reattività granulare ```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 ``` I signal forniscono ad Angular **un tracciamento preciso delle dipendenze** — quando un signal cambia, solo le viste e i computed che effettivamente lo leggono si aggiornano. Questo è più efficiente del broad change detection che Zone.js attiva, ed è la base per rimuovere completamente Zone.js (modalità zoneless). ## Signal-based inputs (più recenti) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Perché è importante I signal sono l'evoluzione più significativa della reattività di Angular — un modello più semplice, più esplicito e molto più efficiente del change detection implicito di Zone.js. Abilitano aggiornamenti granulari, riducono i controlli inutili, si integrano facilmente con computed/effect, e aprono la strada per un Angular zoneless. Comprendere i signal è sempre più essenziale, poiché Angular sta dirigendo il nuovo sviluppo verso di essi come la primitiva di stato predefinita.