Creating observables in Angular - Visual Walkthrough

Concept Flow - Creating observables

Start

↓

Call new Observable()

↓

Define subscriber function

↓

Subscribe to Observable

↓

Observable emits values

↓

Subscriber receives values

↓

Complete or Error

↓

Subscription ends

This flow shows how an observable is created, subscribed to, emits values, and completes or errors out.

Execution Sample

Angular

import { Observable } from 'rxjs';

const obs = new Observable(subscriber => {
  subscriber.next('Hello');
  subscriber.complete();
});

obs.subscribe(value => console.log(value));

Creates an observable that emits 'Hello' once and then completes, logging the value on subscription.

Execution Table

Step	Action	Observable State	Subscriber Callback Called	Output
1	Create Observable with subscriber function	Not started	No
2	Subscribe to Observable	Subscribed	No
3	Observable calls subscriber.next('Hello')	Emitting	Yes	'Hello' logged
4	Observable calls subscriber.complete()	Completed	No
5	Subscription ends	Closed	No

💡 Observable completes after emitting 'Hello', subscription ends.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
obs	Observable object created	Subscribed	Emitting 'Hello'	Completed	Closed
subscriber callback	Not called	Not called	Called with 'Hello'	Not called	No further calls

Key Moments - 3 Insights

Why doesn't the subscriber callback run when the Observable is created?

Because the subscriber function runs only when you subscribe (see Step 2 in execution_table). Creation just defines the Observable.

What happens if subscriber.complete() is not called?

The Observable stays open and can emit more values or errors later. Completion signals no more values will come (see Step 4).

Can the subscriber callback be called multiple times?

Yes, if subscriber.next() is called multiple times before complete(), the callback runs each time (Step 3 shows one emission).

Visual Quiz - 3 Questions

Look at the execution_table, at which step does the subscriber callback first run?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Check the 'Subscriber Callback Called' column in execution_table.

According to variable_tracker, what is the state of 'obs' after Step 4?

A Subscribed

B Emitting

C Completed

D Closed

💡 Hint

Look at the 'obs' row and the 'After Step 4' column in variable_tracker.

If subscriber.complete() was removed, how would the execution_table change?

A Step 4 would show 'Completed' state

B Step 4 would be missing or show no completion

C Subscriber callback would not run at all

D Subscription would end immediately after Step 2

💡 Hint

Refer to the 'Observable State' and 'Subscription ends' in execution_table.

Concept Snapshot

Creating Observables in Angular:
- Use new Observable(subscriber => {...}) to create.
- subscriber.next(value) emits values.
- subscriber.complete() signals end.
- Subscribe with obs.subscribe(callback) to receive values.
- Observable runs subscriber function only on subscription.

Full Transcript

This lesson shows how to create an Observable in Angular using the Observable constructor. First, you define the Observable with a subscriber function that can emit values using subscriber.next and signal completion with subscriber.complete. The Observable does nothing until you subscribe to it. When subscribed, the subscriber function runs, emitting values to the subscriber callback. After completion, the subscription ends. This step-by-step trace helps beginners see when the subscriber callback runs and how the Observable state changes.