Subscribing to observables in Angular - Step-by-Step Execution

Concept Flow - Subscribing to observables

Create Observable

↓

Subscribe to Observable

↓

Observable emits value

↓

Subscriber callback runs

↓

Process emitted value

↓

Observable completes or errors

↓

Subscription ends

This flow shows how an observable is created, subscribed to, emits values, and how the subscriber processes those values until completion or error.

Execution Sample

Angular

import { of } from 'rxjs';

const obs$ = of(1, 2, 3);

obs$.subscribe(value => {
  console.log('Received:', value);
});

This code creates an observable that emits 1, 2, and 3, then subscribes to it to log each emitted value.

Execution Table

Step	Action	Observable State	Subscriber Callback	Output
1	Create observable with values 1, 2, 3	Ready to emit	No callback yet
2	Subscribe to observable	Waiting to emit	Subscriber registered
3	Observable emits 1	Emitting first value	Callback runs with value=1	Received: 1
4	Observable emits 2	Emitting second value	Callback runs with value=2	Received: 2
5	Observable emits 3	Emitting third value	Callback runs with value=3	Received: 3
6	Observable completes	No more values	No callback
7	Subscription ends	Completed	No callback

💡 Observable completes after emitting all values, subscription ends.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	Final
value	undefined	1	2	3	3
obs$	Observable created	Emitting 1	Emitting 2	Emitting 3	Completed

Key Moments - 3 Insights

Why does the subscriber callback run multiple times?

Because the observable emits multiple values (1, 2, 3), the subscriber callback runs once for each emitted value as shown in steps 3, 4, and 5 in the execution table.

What happens after the observable completes?

After the observable completes (step 6), no more values are emitted and the subscription ends (step 7), so the subscriber callback does not run anymore.

Is the subscription active before subscribing?

No, the subscription only becomes active after calling subscribe (step 2). Before that, the observable is just created but not emitting.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'value' variable after step 4?

A 3

B 1

C 2

D undefined

💡 Hint

Check the 'variable_tracker' table column 'After Step 4' for 'value'

At which step does the observable complete?

A Step 5

B Step 6

C Step 7

D Step 3

💡 Hint

Look at the 'execution_table' row where 'Observable completes' is mentioned

If the observable emitted only one value, how many times would the subscriber callback run?

A Once

B Twice

C Three times

D Never

💡 Hint

Subscriber callback runs once per emitted value as shown in steps 3-5

Concept Snapshot

Subscribing to observables:
- Create observable (e.g., of(1,2,3))
- Call subscribe() to listen
- Callback runs for each emitted value
- Observable can complete or error
- Subscription ends after completion or error

Full Transcript

This visual execution shows how subscribing to an observable works in Angular. First, an observable is created with values 1, 2, and 3. Then, subscribing to it registers a callback. When the observable emits each value, the callback runs and processes it. After all values are emitted, the observable completes and the subscription ends. Variables like 'value' track emitted data step-by-step. Key moments clarify why callbacks run multiple times and what happens after completion. Quiz questions test understanding of these steps.