Advanced State Management in Angular with Signals

Rethinking Reactivity in Angular

State management has always been one of the steepest learning curves in modern frontend frameworks. For years, Angular developers relied heavily on RxJS for complex state. While incredibly powerful, RxJS often led to an overwhelming amount of boilerplate and difficult-to-debug subscription models.

Enter Angular Signals.

What are Signals?

A Signal is a wrapper around a value that can notify interested consumers when that value changes. Unlike an RxJS Observable, a Signal always has a current value and does not require a subscription to be read.

Let's look at a practical example of migrating a simple counter from RxJS to Signals.

The Old Way (RxJS)

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-counter',
  template: `<button (click)="increment()">Count: {{ count$ | async }}</button>`
})
export class CounterComponent {
  private countSubject = new BehaviorSubject<number>(0);
  count$ = this.countSubject.asObservable();

  increment() {
    this.countSubject.next(this.countSubject.value + 1);
  }
}

The New Way (Signals)

With Signals, the boilerplate is drastically reduced. We don't need the async pipe, and reading the value is synchronous.

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

@Component({
  selector: 'app-counter',
  template: `<button (click)="increment()">Count: {{ count() }}</button>`
})
export class CounterComponent {
  count = signal(0);

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

Computed Signals

Where Signals truly shine is in their composability. You can create computed signals that automatically update whenever their dependencies change, without manually managing subscriptions.

const price = signal(100);
const taxRate = signal(0.2);

// automatically updates if price or taxRate changes
const total = computed(() => price() * (1 + taxRate()));

By adopting Signals, Angular provides a more intuitive, granular, and performant reactivity model that will shape the framework's future.