What are Angular Signals?

Signals are Angular's new reactive primitives introduced in Angular 16 (stable in 17), providing a simpler and more efficient way to manage state and reactivity. A signal is a wrapper around a value that notifies consumers when the value changes — enabling fine-grained reactivity without Zone.js. Creating signals: const count = signal(0); // WritableSignal<number>. Reading signals: call as a function: count() — reactive reads in templates/computed. Writing signals: count.set(5) — replace value; count.update(v => v + 1) — compute from previous; count.mutate(obj => obj.name = "Alice") — mutate in-place (for objects). Computed signals: derived values that auto-update: const doubled = computed(() => count() * 2) — lazily computed, cached, only re-evaluated when dependencies change. Effects: side effects that run when signals change: const effectRef = effect(() => { console.log("Count is: " + count()); }); — auto-tracks signal dependencies inside; runs after every change. In templates: use signals directly: {{ count() }} — Angular automatically marks the view for check when the signal changes. Signal-based inputs/outputs (Angular 17.1+): @Input({ required: true }) title = input.required<string>(); returns a Signal. Benefits over traditional change detection: fine-grained updates (only views reading a signal update), no need for OnPush, no Zone.js dependency, simpler mental model. Signals can interoperate with Observables using toObservable() and toSignal().