Angular Signals

Definition

Angular Signals is a reactivity system built into Angular that wraps values in trackable containers so the framework can detect exactly which parts of a component depend on which state, updating only the affected parts of the DOM.

Overview

Angular Signals was introduced to address a long-standing criticism of Angular's original change-detection model, which relied on Zone.js to monkey-patch browser APIs and trigger a full check of the component tree whenever any asynchronous event occurred. That approach worked but was comparatively coarse-grained and added both a runtime dependency and mental overhead for developers debugging why a particular change-detection cycle ran. Signals replace that model, component by component, with explicit, fine-grained reactivity: a signal is a wrapper around a value, created with `signal()`, that components and computed values can read, and Angular tracks exactly which templates or computations depend on which signals so it can update only what actually needs to change. A signal is read by calling it as a function (`count()`) and updated through `.set()` or `.update()`, which notifies only the specific consumers that depend on it. Derived state is expressed with `computed()`, which automatically recalculates when any signal it reads changes, and side effects that need to run in response to signal changes use `effect()`. This model is conceptually similar to reactivity primitives popularized by SolidJS and, more recently, adopted in similar form by Vue's Composition API and Preact, reflecting a broader industry convergence on signal-based fine-grained reactivity as an alternative to virtual-DOM diffing or dirty-checking. Signals do not replace Angular's existing RxJS-based patterns outright; the two interoperate through utilities like `toSignal()` and `toObservable()`, letting teams migrate incrementally rather than rewrite existing observable-heavy code. Angular's broader roadmap has used signals as a foundation for further changes, including zoneless change detection, which removes the Zone.js dependency entirely for applications that adopt signals consistently, reducing bundle size and simplifying the framework's internals.

Key Concepts

• Fine-grained reactivity: only components that read a changed signal re-render
• signal() creates a writable, trackable reactive value
• computed() derives values that automatically update when dependencies change
• effect() runs side effects in response to signal changes
• Interoperates with RxJS observables via toSignal() and toObservable()
• Enables zoneless change detection, removing the Zone.js runtime dependency
• Improves debuggability by making state dependencies explicit rather than implicit
• Incrementally adoptable alongside existing Angular applications

Use Cases

Frequently Asked Questions

Related in Web