Angular has continued to evolve with a strong focus on developer experience and application performance. One of its most impactful additions is Signals, a built-in reactive state management system that offers a simpler way to manage application state.

For years, Angular developers have relied on RxJS for reactive programming. While RxJS remains a powerful tool for handling asynchronous data streams, not every state management scenario requires the complexity of Observables and subscriptions.

In this article, we'll explore what Angular Signals are, how they work, and when you should choose them over RxJS.

What Are Angular Signals?

A Signal is a reactive container that stores a value and automatically notifies Angular when that value changes.

Instead of manually subscribing to data changes, Angular tracks signal dependencies and updates only the parts of the UI that depend on them.

Here's a simple example:

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

count = signal(0);

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

Reading the value is straightforward:

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

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

Whenever count changes, Angular automatically refreshes the UI without requiring subscriptions or the async pipe.

Why Did Angular Introduce Signals?

RxJS is an excellent library for reactive programming, but many applications use it for simple local state where it can add unnecessary complexity.

Developers often face challenges such as:

• Managing subscriptions
• Preventing memory leaks
• Learning numerous RxJS operators
• Writing additional boilerplate code

Signals address these challenges by providing a simpler, more intuitive API for synchronous application state.

Core Features of Angular Signals

1. Writable Signals

Writable signals hold mutable state.

const username = signal('John');

username.set('Alice');

username.update(name => name.toUpperCase());

The API is concise and easy to understand.

2. Computed Signals

Computed signals derive values from one or more signals.

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

price = signal(100);

tax = computed(() => price() * 0.18);

total = computed(() => price() + tax());

Whenever price changes, both tax and total update automatically.

This eliminates the need to manually synchronize derived values.

3. Effects

Effects execute whenever one or more signals change.

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

effect(() => {
  console.log(count());
});

Effects are useful for:

• Logging
• Saving data to local storage
• Analytics
• Triggering external APIs
• Integrating with third-party libraries

Effects should be used for side effects, not for deriving application state.

Signals vs RxJS

Although Signals simplify state management, they are not a replacement for RxJS.

Signals excel at managing synchronous UI state, while RxJS remains the preferred solution for asynchronous streams and event composition.

When Should You Use Signals?

Signals are a great choice for:

• Component state
• UI visibility
• Form state
• Counters
• Theme switching
• Selected items
• Dashboard widgets
• Shopping cart totals
• Filters and search state

They help reduce code complexity while keeping applications reactive.

When Should You Continue Using RxJS?

RxJS is still the better option when working with:

• HTTP requests
• WebSockets
• Server-Sent Events (SSE)
• Real-time messaging
• Multiple asynchronous data sources
• Complex event transformations
• Retry, debounce, throttle, and buffering scenarios

Many enterprise Angular applications will use both Signals and RxJS together.

Best Practices

To get the most from Angular Signals:

• Use Signals for local and component-level state.
• Use Computed Signals for derived values instead of duplicating state.
• Reserve Effects for side effects such as logging or persistence.
• Avoid storing asynchronous streams directly in Signals.
• Continue using RxJS where asynchronous event handling and stream composition are required.

Combining both approaches appropriately leads to cleaner, more maintainable applications.

Performance Benefits

Angular Signals improve performance by:

• Tracking dependencies automatically.
• Updating only the affected parts of the UI.
• Reducing unnecessary change detection work.
• Minimizing boilerplate code.
• Improving readability and maintainability.

These improvements are particularly valuable in large enterprise applications where efficient rendering is important.

Conclusion

Angular Signals represent a significant step forward in Angular's reactive programming model. They make state management more intuitive, reduce boilerplate, and improve the developer experience for many common UI scenarios.

That said, Signals are designed to complement—not replace—RxJS. RxJS remains essential for handling asynchronous data streams and complex event-driven workflows, while Signals shine when managing synchronous application state.

Choosing the right tool for the right problem is the key to building scalable, maintainable Angular applications.

Key Takeaways

• ✅ Signals simplify local state management.
• ✅ Computed Signals automatically derive state.
• ✅ Effects are ideal for side effects.
• ✅ RxJS remains the best choice for asynchronous streams.
• ✅ Using Signals and RxJS together results in cleaner, more maintainable Angular applications.