Migrating from observables to signals in Angular - Step-by-Step Execution

Concept Flow - Migrating from observables to signals

Start with Observable

↓

Identify Observable usage

↓

Create Signal with initial value

↓

Subscribe to Observable inside signal or use effect

↓

Update Signal on Observable emission

↓

Replace Observable consumers with Signal consumers

↓

Test and verify reactive updates

↓

Migration Complete

This flow shows how to replace an Observable with a Signal by creating a signal, updating it on Observable emissions, and then using the signal in the component.

Execution Sample

Angular

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

const count$ = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
});

const count = signal(0);
count$.subscribe(value => count.set(value));

This code creates an Observable emitting numbers and a Signal updated with those numbers.

Execution Table

Step	Action	Observable emits	Signal value before	Signal value after	Effect on UI
1	Observable created	none	0	0	UI shows 0
2	Observable emits 1	1	0	1	UI updates to 1
3	Observable emits 2	2	1	2	UI updates to 2
4	No more emissions	none	2	2	UI stays at 2

💡 Observable completes, signal holds last emitted value 2, UI reflects latest state

Variable Tracker

Variable	Start	After 1	After 2	Final
count (signal)	0	1	2	2
count$ (observable)	not emitted	1 emitted	2 emitted	completed

Key Moments - 2 Insights

Why do we need to update the signal inside the Observable subscription?

Because signals hold the current state, updating the signal inside the subscription ensures the signal reflects the latest Observable value, as shown in execution_table steps 2 and 3.

Can we use the Observable directly in the template after migration?

No, after migration you replace Observable usage with the signal, so the template reacts to the signal's value directly, avoiding manual subscriptions.

Visual Quiz - 3 Questions

Look at the execution table, what is the signal value after step 2?

A 1

B 0

C 2

D undefined

💡 Hint

Check the 'Signal value after' column at step 2 in the execution_table.

At which step does the Observable emit the value 2?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Observable emits' column in the execution_table.

If the Observable emitted a value 3 after step 3, what would happen to the signal value?

A Signal value would remain 2

B Signal value would update to 3

C Signal would reset to 0

D Signal would throw an error

💡 Hint

Signals update on each Observable emission as shown in execution_table steps 2 and 3.

Concept Snapshot

Migrating from Observables to Signals in Angular:
- Create a signal with initial value
- Subscribe to Observable and update signal on emissions
- Replace Observable usage with signal in templates
- Signals provide simpler, synchronous reactive state
- Test to ensure UI updates correctly

Full Transcript

This visual execution shows how to migrate from Observables to Signals in Angular. We start with an Observable emitting values. We create a signal initialized to zero. Each time the Observable emits a value, we update the signal inside the subscription. The UI reacts to the signal's current value. The execution table traces each emission and signal update step-by-step. Key moments clarify why updating the signal inside the subscription is necessary and why templates should use signals after migration. The quiz tests understanding of signal values and Observable emissions during migration.