Signals

Signals are Angular's reactive primitive: a signal holds a value, tracks where it is read, and notifies those readers when the value changes.

A signal is a wrapper around a value. You read it by calling it as a function, and you change it with set or update. When a template or another piece of reactive code reads a signal, Angular records that dependency. When the value changes, Angular knows which components need to update.

There are three building blocks:

• signal() creates a writable value.
• computed() derives a value from other signals and recalculates only when they change.
• effect() runs a side effect when the signals it reads change.

Example

export class CartComponent {
  items = signal<Item[]>([]);
  total = computed(() =>
    this.items().reduce((sum, item) => sum + item.price, 0));

  add(item: Item) {
    this.items.update(list => [...list, item]);
  }
}

The template reads total(). When add runs, the total is recalculated and the view updates. There is no subscription to manage.

Common misunderstanding

Signals are often described as the replacement for RxJS. They cover different ground. A signal always has a current value and suits state that the view displays. An observable models events over time, such as HTTP responses, WebSocket messages or user input that needs debouncing. Most applications use both, and toSignal and toObservable convert between them.

A second mistake is using effect() to copy one signal into another. That job belongs to computed(). Effects are meant for work outside the reactive graph, such as logging or writing to local storage.

For developers coming from AngularJS, signals replace the mental model of $scope and $watch with explicit dependencies. The AngularJS to Angular reference shows the equivalents.

Related terms

• Change detection
• Zoneless change detection
• Standalone components