Angular Signals vs Observables

In this tutorial, you will learn the difference between Angular Signals vs Observables and when to use each one.

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, then 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
count.update(v => v + 1); //update the count value

console.log(count()); // Access value

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: Observables

import { Observable } from 'rxjs';

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

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.

Questions and Answers

Q 1: When to Use Signals?

Ans: We use Signals when we need to manage component UI state, optimizing change detection, etc.

Q 2: When to Use Observables?

Ans: We use Observables when handling HTTP requests, working with WebSockets, managing real-time data, and using RxJS operators, etc.

Q 3: Are Signals replacing Observables?

Ans: No

Q 4: Which handles async streams?

Ans: Observables

Q 5: Do Signals need RxJS?

Ans: No