BehaviorSubject as simple store in Angular - Step-by-Step Execution

Concept Flow - BehaviorSubject as simple store

Create BehaviorSubject with initial value

↓

Subscribe to BehaviorSubject

↓

Component receives current value

↓

Component triggers update

↓

BehaviorSubject emits new value

↓

Subscribers get updated value

↓

UI updates with new data

This flow shows how a BehaviorSubject holds a value, components subscribe to it, and updates flow through the store to the UI.

Execution Sample

Angular

import { BehaviorSubject } from 'rxjs';

const store = new BehaviorSubject(0);

store.subscribe(value => console.log('Value:', value));

store.next(1);
store.next(2);

This code creates a BehaviorSubject store, subscribes to it, and updates the value twice, logging each update.

Execution Table

Step	Action	BehaviorSubject Value	Subscribers Notified	Output
1	Create BehaviorSubject with initial value 0	0	No	No output
2	Subscribe to BehaviorSubject	0	Yes	Value: 0
3	Call next(1) to update value	1	Yes	Value: 1
4	Call next(2) to update value	2	Yes	Value: 2
5	No more updates	2	No	No output

💡 No more updates; BehaviorSubject holds last value 2

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
store.value	0	0	1	2	2

Key Moments - 3 Insights

Why does the subscriber immediately get the initial value when subscribing?

Because BehaviorSubject always emits its current value to new subscribers, as shown in step 2 of the execution_table.

What happens if we call next() multiple times quickly?

Each next() call updates the BehaviorSubject's value and notifies subscribers immediately, as seen in steps 3 and 4.

Does BehaviorSubject lose the last value after updates?

No, it keeps the last emitted value, so new subscribers get the latest state, shown by the value 2 after step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what value does the subscriber receive immediately after subscribing?

A 1

B undefined

C 0

D No value

💡 Hint

Check step 2 in the execution_table where subscription happens and output is 'Value: 0'

At which step does the BehaviorSubject value change to 1?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Look at the BehaviorSubject Value column in the execution_table for step 3

If we add a new subscriber after step 4, what value will it receive?

A 0

B 2

C 1

D No value

💡 Hint

BehaviorSubject holds the last value; see variable_tracker final value after step 4

Concept Snapshot

BehaviorSubject holds a current value and emits it immediately to new subscribers.
Use next() to update the value and notify all subscribers.
It acts like a simple store for state in Angular apps.
Subscribers always get the latest value on subscription.
Ideal for sharing state reactively across components.

Full Transcript

This visual trace shows how BehaviorSubject works as a simple store in Angular. First, a BehaviorSubject is created with an initial value of 0. When a component subscribes, it immediately receives this current value. Then, when next() is called with new values like 1 and 2, the BehaviorSubject updates its stored value and notifies all subscribers. The subscribers react to these updates, for example by logging the new value. The BehaviorSubject always keeps the last emitted value, so any new subscriber will get the latest state right away. This makes it a great tool for managing shared state reactively in Angular applications.