Wat zijn Angular Signals?

Question

Accepted Answer

**Signals** zijn Angular's reactieve primitieve (toegevoegd in Angular 16+) voor state management — een wrapper rond een waarde die **consumers op de hoogte stelt wanneer deze verandert**, waardoor fine-grained, efficiënte updates mogelijk zijn zonder op Zone.js change detection te vertrouwen. ## Een signal maken en gebruiken ```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 }); } } ``` ## Een signal uitlezen: roep het aan als een functie ```html ``` Opmerking: signals worden **gelezen door ze aan te roepen** (`count()`), niet als normale eigenschappen. In de template houdt Angular precies bij welke signals een view leest, zodat alleen de betreffende onderdelen worden bijgewerkt wanneer een signal verandert. ## De drie signaaltypen ```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` is lazy en gecached (zoals Vue's computed); `effect` voert reactief side effects uit (zoals een watcher). ## Waarom signals belangrijk zijn: fine-grained reactivity ```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 geven Angular **nauwkeurige dependency tracking** — wanneer een signal verandert, worden alleen de views en computeds die het daadwerkelijk uitlezen bijgewerkt. Dit is efficiënter dan de brede change detection die Zone.js triggert, en vormt de basis voor het volledig verwijderen van Zone.js (zoneless mode). ## Signal-gebaseerde inputs (nieuwer) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Waarom het belangrijk is Signals zijn de meest betekenisvolle recente evolutie in Angular's reactiviteit — een eenvoudiger, explicieter en veel efficiënter model dan de impliciete Zone.js change detection. Ze maken fine-grained updates mogelijk, verminderen onnodige controles, integreren schoon met computed/effect, en bereiden de weg voor zoneless Angular. Inzicht in signals wordt steeds essentiëler, omdat Angular nieuwe ontwikkeling naar hen stuurt als standaard state primitieve.