Angular 22 Signals State Management: A Beginner's Guide

Managing application state has always been an important part of Angular development. Earlier, developers relied on RxJS, BehaviorSubject, and libraries like NgRx to build reactive applications.

With Angular Signals, state management becomes simpler, more efficient, and easier to maintain. Signals automatically notify Angular when data changes, eliminating the need for manual subscriptions in many scenarios.

In this article, we'll explore what Angular Signals are, how they work, and why they're becoming the preferred way to manage state in Angular applications.

What Are Angular Signals?
A Signal is a reactive container that stores a value and automatically updates the UI whenever that value changes.

Unlike BehaviorSubject, you don't need to subscribe or unsubscribe manually. Angular tracks dependencies automatically and updates only the affected components.

Types of Signals
Angular provides three main types of Signals.

1. Writable Signal
Writable Signals hold values that can be updated.

TypeScript:

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

count = signal(0);

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

HTML:

<h2>{{ count() }}</h2>

<button (click)="increment()">
  Increment
</button>

2. Computed Signal
Computed Signals derive values from other Signals.

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

price = signal(1000);
quantity = signal(2);

total = computed(() => price() * quantity());

Whenever price or quantity changes, total updates automatically.

3. Effect
Effects run side effects whenever a Signal changes.

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

username = signal('John');

constructor() {
  effect(() => {
    console.log(username());
  });
}

Effects are useful for logging, analytics, or updating local storage.

Benefits of Angular Signals

• Less boilerplate code
• No manual subscriptions
• Fine-grained UI updates
• Better performance
• Easier state management
• Built into Angular

When Should You Use Signals?

Signals are ideal for:

• Component state
• Shopping carts
• User profiles
• Dashboard data
• Theme switching
• Shared application state

Use RxJS when working with:

• HTTP requests
• WebSockets
• Real-time streams
• Complex asynchronous operations

Best Practices

• Use signal() for mutable state.
• Use computed() for derived values.
• Use effect() only for side effects.
• Keep Signals immutable by creating new objects or arrays when updating state.

Conclusion
Angular 22 Signals provide a modern and efficient way to manage application state. They reduce boilerplate, improve performance, and simplify reactive programming by removing the need for manual subscriptions.

For UI and component state, Signals are now the preferred choice, while RxJS continues to be the best option for handling asynchronous data streams. Using both together allows you to build scalable and high-performance Angular applications with clean, maintainable code.