Angular Signals

What is Signals in Angular?

A signal is a reactive value that tracks who reads it. When it changes, Angular knows exactly which parts of the view depend on it and updates only those — without zone.js and without a full change detection pass.

Why Signals matters

Signals are the largest change in Angular since standalone components. They make reactivity explicit, remove most manual subscription code, and are the foundation of zoneless Angular.

Signals example

import { signal, computed, effect } from '@angular/core';

export class CartComponent {
  items = signal<Job[]>([]);
  count = computed(() => this.items().length);          // derived, cached
  isEmpty = computed(() => this.count() === 0);

  constructor() {
    effect(() => console.log('cart size:', this.count()));  // runs on change
  }

  add(job: Job): void {
    this.items.update(list => [...list, job]);
  }

  clear(): void {
    this.items.set([]);
  }
}

How this works

Reading a signal means calling it: items(). computed values recalculate only when a dependency changes and are cached otherwise. In a template you also call them: {{ count() }}.

Key points to remember

• Always call a signal to read it — forgetting the parentheses gives you the function itself.
• computed is lazy and cached; it does not recompute unless something it reads changed.
• effect is for side effects such as logging or storage, not for setting other signals.

The signal API

Common mistakes with Signals

• Writing {{ count }} instead of {{ count() }}, which renders the function.
• Mutating an array inside a signal instead of setting a new one — the signal never notices.
• Using effect to keep one signal in sync with another; computed is the right tool.