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.

Practice

1. What does subscribing to an observable in Angular allow you to do?

easy

A. React to data or events over time

B. Create new components automatically

C. Change the Angular version

D. Compile TypeScript to JavaScript

Solution

1. Step 1: Understand the purpose of observables

   Observables emit data or events over time, like a stream of values.

2. Step 2: Role of subscribing

   Subscribing lets you listen and react to these emitted values as they arrive.

3. Final Answer:

   React to data or events over time -> Option A

4. Quick Check:

   Subscribing = Reacting to data/events [OK]

Hint: Subscribing means listening to data changes over time [OK]

Common Mistakes:

• Thinking subscribing creates components
• Confusing subscribing with compilation
• Believing subscribing changes Angular version

2. Which is the correct syntax to subscribe to an observable named data$ in Angular?

easy

A. data$.subscribe(value => console.log(value));

B. data$.subscribe = value => console.log(value);

C. subscribe(data$ => console.log(data$));

D. data$.subscribe(console.log());

Solution

1. Step 1: Identify correct subscribe method usage

   The subscribe method is called on the observable with a callback function.

2. Step 2: Check syntax correctness

   data$.subscribe(value => console.log(value)); correctly calls data$.subscribe with an arrow function receiving the emitted value.

3. Final Answer:

   data$.subscribe(value => console.log(value)); -> Option A

4. Quick Check:

   Correct subscribe syntax = data$.subscribe(value => console.log(value)); [OK]

Hint: Use observable.subscribe(callback) to listen [OK]

Common Mistakes:

• Assigning subscribe instead of calling it
• Calling subscribe as a standalone function
• Calling console.log() prematurely

3. Given this code snippet:

const obs$ = of(1, 2, 3);
obs$.subscribe({
  next: x => console.log(x),
  error: err => console.error(err),
  complete: () => console.log('Done')
});

What will be the console output?

medium

A. Done 1 2 3

B. 1 2 3 Done

C. 1 2 3

D. Error

Solution

1. Step 1: Understand observable emissions

   The observable emits values 1, 2, 3 in sequence.

2. Step 2: Analyze subscription callbacks

   The next callback logs each value, then complete logs 'Done'.

3. Final Answer:

   1 2 3 Done -> Option B

4. Quick Check:

   Values then complete message = 1 2 3 Done [OK]

Hint: next logs values, complete logs 'Done' after all [OK]

Common Mistakes:

• Assuming complete logs before values
• Ignoring complete callback
• Expecting error without error emission

4. What is wrong with this subscription code?

this.data$.subscribe(data => {
  this.value = data;
});
// No unsubscribe called anywhere

medium

A. It will unsubscribe automatically

B. It will throw a syntax error

C. It will cause a memory leak if component is destroyed

D. It will not receive any data

Solution

1. Step 1: Identify subscription management

   The code subscribes but never unsubscribes, risking resource leaks.

2. Step 2: Understand Angular component lifecycle

   Without unsubscribing, the subscription stays active after component destruction, causing memory leaks.

3. Final Answer:

   It will cause a memory leak if component is destroyed -> Option C

4. Quick Check:

   Missing unsubscribe = memory leak risk [OK]

Hint: Always unsubscribe to avoid memory leaks [OK]

Common Mistakes:

• Assuming Angular unsubscribes automatically
• Thinking no data will be received
• Confusing syntax errors with runtime issues

5. You want to subscribe to two observables obs1$ and obs2$ and combine their latest values whenever either emits. Which RxJS operator should you use before subscribing?

hard

A. filter

B. map

C. catchError

D. combineLatest

Solution

1. Step 1: Understand the need to combine latest values

   You want to react to the latest values from both observables whenever either emits.

2. Step 2: Identify the correct RxJS operator

   combineLatest emits an array of latest values from all observables whenever any emits.

3. Final Answer:

   combineLatest -> Option D

4. Quick Check:

   Combine latest values = combineLatest operator [OK]

Hint: Use combineLatest to merge latest values from multiple observables [OK]

Common Mistakes:

• Using map which transforms but doesn't combine
• Using filter which only filters emissions
• Using catchError which handles errors, not combining