BehaviorSubject as simple store in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a BehaviorSubject in Angular?

A BehaviorSubject is a special type of Observable that holds a current value and emits it immediately to new subscribers. It is often used to store and share state in Angular apps.

beginner

How does BehaviorSubject differ from a regular Subject?

Unlike a regular Subject, a BehaviorSubject stores the latest value and emits it to new subscribers right away. Regular Subjects only emit new values after subscription.

intermediate

Why is BehaviorSubject useful as a simple store in Angular?

Because it keeps the current state and allows components to subscribe and get the latest state immediately, making it easy to share and update data reactively.

beginner

How do you update the value inside a BehaviorSubject?

You use the .next(newValue) method to push a new value to the BehaviorSubject, which then emits it to all subscribers.

beginner

What happens when a new component subscribes to a BehaviorSubject?

The new subscriber immediately receives the current stored value from the BehaviorSubject, even if no new values have been emitted since it subscribed.

What method do you use to send a new value to a BehaviorSubject?

A .next()

B .subscribe()

C .emit()

D .push()

You use .next() to send new values to a BehaviorSubject.

What value does a new subscriber to a BehaviorSubject receive?

A The last emitted value immediately

B Only future values after subscription

C No value until .subscribe() is called again

D An error if no value was emitted before

BehaviorSubject immediately emits the last stored value to new subscribers.

Which of these is NOT a reason to use BehaviorSubject as a simple store?

A It shares state easily across components

B It allows reactive updates to subscribers

C It holds the current state value

D It automatically persists data to local storage

BehaviorSubject does not persist data automatically; it only holds and emits values in memory.

What happens if you subscribe to a regular Subject after it has emitted values?

A You get an error

B You receive all past values immediately

C You only receive new values emitted after subscription

D You receive the last value only

Regular Subjects do not replay past values to new subscribers.

Which RxJS class is best for storing and sharing a simple state with immediate access to the current value?

A ReplaySubject

B BehaviorSubject

C AsyncSubject

D Subject

BehaviorSubject stores the current value and emits it immediately to new subscribers.

Explain how BehaviorSubject works as a simple store in Angular and why it is useful.

Think about how components get and update shared data.

Describe the difference between BehaviorSubject and a regular Subject in Angular.

Focus on value storage and emission behavior.

Practice

1. What is the main purpose of using BehaviorSubject in Angular as a simple store?

easy

A. To hold and share the latest value with all subscribers immediately

B. To perform HTTP requests automatically

C. To create Angular components dynamically

D. To manage routing between pages

Solution

1. Step 1: Understand BehaviorSubject role

   BehaviorSubject holds a current value and shares it with subscribers immediately when they subscribe.

2. Step 2: Compare with other options

   The other options describe unrelated Angular features like HTTP, components, and routing.

3. Final Answer:

   To hold and share the latest value with all subscribers immediately -> Option A

4. Quick Check:

   BehaviorSubject shares latest value immediately [OK]

Hint: BehaviorSubject always gives current value to new subscribers [OK]

Common Mistakes:

• Confusing BehaviorSubject with HTTP or routing
• Thinking it delays value delivery
• Assuming it creates components

2. Which of the following is the correct way to update the value stored in a BehaviorSubject named store$?

easy

A. store$.update(newValue);

B. store$.next(newValue);

C. store$.setValue(newValue);

D. store$.emit(newValue);

Solution

1. Step 1: Recall BehaviorSubject update method

   The method to update a BehaviorSubject's value is next().

2. Step 2: Check other method names

   Methods like update(), setValue(), and emit() do not exist on BehaviorSubject.

3. Final Answer:

   store$.next(newValue); -> Option B

4. Quick Check:

   Use next() to update BehaviorSubject [OK]

Hint: Use next() to push new values to BehaviorSubject [OK]

Common Mistakes:

• Using update() or setValue() instead of next()
• Confusing EventEmitter with BehaviorSubject
• Trying to assign value directly

3. Given this Angular code snippet, what will be logged to the console?

const store$ = new BehaviorSubject(0);
store$.subscribe(value => console.log('Subscriber 1:', value));
store$.next(5);
store$.subscribe(value => console.log('Subscriber 2:', value));
store$.next(10);

medium

A. Subscriber 1: 0
Subscriber 2: 0
Subscriber 1: 5
Subscriber 2: 5
Subscriber 1: 10
Subscriber 2: 10

B. Subscriber 1: 0
Subscriber 1: 5
Subscriber 2: 0
Subscriber 1: 10
Subscriber 2: 10

C. Subscriber 1: 0
Subscriber 1: 5
Subscriber 2: 5
Subscriber 1: 10
Subscriber 2: 10

D. Subscriber 1: 5
Subscriber 2: 5
Subscriber 1: 10
Subscriber 2: 10

Solution

1. Step 1: Trace first subscription

   Subscriber 1 subscribes first and immediately receives initial value 0, then receives 5 after next(5).

2. Step 2: Trace second subscription

   Subscriber 2 subscribes after next(5), so it immediately receives current value 5.

3. Step 3: Trace next(10) call

   Both subscribers receive 10 after next(10).

4. Final Answer:

   Subscriber 1: 0 Subscriber 1: 5 Subscriber 2: 5 Subscriber 1: 10 Subscriber 2: 10 -> Option C

5. Quick Check:

   BehaviorSubject sends current value on subscribe [OK]

Hint: New subscribers get latest value immediately [OK]

Common Mistakes:

• Assuming second subscriber gets initial 0 instead of 5
• Missing initial value emission on subscribe
• Confusing order of console logs

4. Identify the error in this Angular code using BehaviorSubject as a simple store:

const store$ = new BehaviorSubject();
store$.subscribe(value => console.log(value));
store$.next(42);

medium

A. subscribe() must be called with an object, not a function

B. next() cannot be called after subscribe()

C. BehaviorSubject cannot emit numbers

D. BehaviorSubject requires an initial value when created

Solution

1. Step 1: Check BehaviorSubject constructor

   BehaviorSubject requires an initial value passed to its constructor; here it is missing.

2. Step 2: Validate other statements

   Calling next() after subscribe() is valid; subscribe() accepts a function; BehaviorSubject can emit numbers.

3. Final Answer:

   BehaviorSubject requires an initial value when created -> Option D

4. Quick Check:

   BehaviorSubject must have initial value [OK]

Hint: Always provide initial value to BehaviorSubject constructor [OK]

Common Mistakes:

• Omitting initial value in constructor
• Thinking next() can't be called after subscribe()
• Confusing subscribe() argument types

5. You want to create a simple store using BehaviorSubject to hold a user's profile object and update it safely. Which approach correctly updates only the user's name without losing other profile data?

const profile$ = new BehaviorSubject({ name: 'Alice', age: 30 });
// Update name to 'Bob' here

hard

A. profile$.next({ ...profile$.value, name: 'Bob' });

B. profile$.next({ name: 'Bob' });

C. profile$.value.name = 'Bob';

D. profile$.update({ name: 'Bob' });

Solution

1. Step 1: Understand BehaviorSubject value update

   Directly assigning to value property does not notify subscribers; next() must be called with full updated object.

2. Step 2: Preserve existing data while updating name

   Use spread operator to copy existing profile and override name, then call next() with new object.

3. Step 3: Check other options

   profile$.next({ name: 'Bob' }); loses age property; profile$.value.name = 'Bob'; mutates value without notification; profile$.update({ name: 'Bob' }); uses non-existent update() method.

4. Final Answer:

   profile$.next({ ...profile$.value, name: 'Bob' }); -> Option A

5. Quick Check:

   Use next() with spread to update partial data [OK]

Hint: Use spread operator with next() to update partial store data [OK]

Common Mistakes:

• Overwriting entire object losing other properties
• Mutating value directly without next()
• Using non-existent update() method