Angular Signals vs Observables

Introduction

For many years, Observables from RxJS have been the standard solution for handling asynchronous operations, event streams, and reactive data flows. With the introduction of Angular Signals in Angular 16, developers now have a simpler and more efficient way to manage local reactive state.

In this tutorial, you’ll learn the differences between Angular Signals and Observables, how each works, their advantages and limitations, practical examples, and when to use one over the other in modern Angular applications.

📖

Best Practices:

Use Signals for component and local UI state.
Use Observables for asynchronous data sources.
Store HTTP responses in Signals when appropriate.
Use computed() for derived values.
Prefer AsyncPipe instead of manual subscriptions in templates.

What are Angular Signals?

Angular Signals is used to manage state, and it is used to optimize Angular change detection.

When we use Angular Signals, there is no need for subscription or unsubscription.

Note: Angular Signal does not handle Asynchronous operations.

Example: Angular Signals


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

const count = signal(0);

count.set(5); // set the count value
console.log(count()); 

count.update(v => v + 1); //update the count value

console.log(count());

Output:

5
6

What are Observables?

Observables are used to handle Asynchronous streams such as HTTP calls, events, and WebSockets. It comes from RXJS.

Observables have powerful operators (map, switchMap, debounceTime, etc.)

Example 1:


import { interval } from 'rxjs'; 
interval(1000).subscribe(value => { 
console.log(value); 
});

Output:

0
1
2
3
…

Example 2: Observables


import { Observable } from 'rxjs';

const data$: Observable = new Observable(observer => {
  observer.next(1);
  observer.next(2);
});

How Angular Signals Work?

Signals automatically track where their values are used. Whenever a Signal changes, Angular updates only the dependent parts of the UI.


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

name = signal('John'); 

name.set('Rom');

Template:


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

Output:

Rom

Note: Angular refreshes only the affected template.

How Observables Work?

Observables emit data whenever new values become available.


this.http.get('/api/users').subscribe(users => { 
console.log(users); 
});

Note: The subscriber receives emitted values until the Observable completes or is unsubscribed.

Difference between Angular Signals vs Observables

Signals	Observables
It is used for UI state management	It is used Async data streams
It executes Synchronously	It executes Asynchronously
There is no required for Subscriptions	There is required for Subscriptions
Change Detection is Automatic & optimized	Change Detection is Manual (async pipe)
It is easy to learn	It’s not easy to learn
It’s performance very High	It’s depends on usage.
It is best for Local component state.	It is best for HTTP, events, streams.

Common Mistakes

Replacing every Observable with a Signal.
Using Signals for continuous event streams.
Forgetting to unsubscribe from manual Observable subscriptions when necessary.
Mutating Signal values directly instead of using .set() or .update().
Performing expensive calculations directly in templates instead of using computed().