Vad är Angular Signals?

Question

Accepted Answer

**Signals** är Angulars reaktiva primitiv (tillagd i Angular 16+) för tillståndshantering — ett omslag omkring ett värde som **meddelar konsumenter när det ändras**, vilket möjliggör finkorning, effektiva uppdateringar utan att förlita sig på Zone.js ändringsdetektering. ## Skapa och använda en 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 }); } } ``` ## Läsa en signal: ring den som en funktion ```html ``` Signaler **läses genom att anropa dem** (`count()`), inte som vanliga egenskaper. I mallen spårar Angular exakt vilka signaler en vy läser, så endast de påverkade delarna uppdateras när en signal ändras. ## De tre signaltyperna ```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` är lat och cachad (som Vues beräknade); `effect` kör bieffekter reaktivt (som en bevakare). ## Varför signaler spelar roll: finkorning reaktivitet ```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 ``` Signaler ger Angular **exakt beroendeföljning** — när en signal ändras uppdateras endast vyerna och de beräknade som faktiskt läser den. Detta är mer effektivt än den breda ändringsdetektering som Zone.js utlöser, och är grunden för att helt ta bort Zone.js (zoneless läge). ## Signalbaserade inmatningar (nyare) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Varför det är viktigt Signaler är den mest betydande utvecklingen på senare tid i Angulars reaktivitet — en enklare, mer explicit och mycket mer effektiv modell än den implicita Zone.js ändringsdetekteringen. De möjliggör finkorning uppdateringar, minskar onödig kontroll, integreras rent med computed/effect och banar vägen för zoneless Angular. Att förstå signaler blir alltmer väsentligt, eftersom Angular styr ny utveckling mot dem som standardtillståndsprimitiv.