Angular Signals: practical guide to migrate your app

What are Signals?

Signals are a new reactive primitive in Angular that allows you to manage state in a granular and efficient way. They are functions that hold a value and notify consumers when that value changes.

Signal vs Observable

Unlike RxJS Observables, Signals are synchronous, simpler to use, and integrate directly with Angular's change detection system.

Creating Signals

Creating a signal is as simple as calling the signal() function with an initial value. To read the value, you call the signal as a function. To write, you use .set() or .update().

Computed signals

computed() signals derive their value from other signals. They are automatically recalculated when their dependencies change and are always read-only.

Effects

effect() runs code as a side effect when the signals it reads change. They are useful for logging, syncing with external APIs, or localStorage.

Step-by-step migration

Migrating an existing app to Signals is a gradual process. You can start by converting component properties to signals, then use computed for derived state, and finally replace simple Subjects.

Best practices

Use signals for local component state, computed for derived state, and keep state transformations pure and predictable. Avoid using mutate() and prefer update() or set().

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

@Component({
  selector: 'app-counter',
  template: `
    <p>Contador: {{ count() }}</p>
    <p>Doble: {{ double() }}</p>
    <button (click)="increment()">+1</button>
  `,
})
export class CounterComponent {
  count = signal(0);
  double = computed(() => this.count() * 2);

  increment() {
    this.count.update(c => c + 1);
  }
}