Subject types (Subject, BehaviorSubject, ReplaySubject) in Angular - Step-by-Step Execution

Concept Flow - Subject types (Subject, BehaviorSubject, ReplaySubject)

Create Subject

↓

Subscribe Observers

↓

Emit Values

↓

Subject: Sends to current subscribers only

↓

BehaviorSubject: Sends last value + new values

↓

ReplaySubject: Sends last N values + new values

This flow shows how different Subject types handle subscriptions and emitted values in Angular.

Execution Sample

Angular

import { Subject } from 'rxjs';
const subject = new Subject<number>();
subject.subscribe(v => console.log('Sub1:', v));
subject.next(1);
subject.subscribe(v => console.log('Sub2:', v));
subject.next(2);

This code creates a Subject, subscribes two observers at different times, and emits values to show how Subject sends values only to current subscribers.

Execution Table

Step	Action	Subject State	Subscribers	Output
1	Create Subject	No values emitted	None	None
2	Subscribe Sub1	No values emitted	Sub1	None
3	Emit value 1	Value 1 emitted	Sub1	Sub1: 1
4	Subscribe Sub2	Value 1 emitted	Sub1, Sub2	None
5	Emit value 2	Value 2 emitted	Sub1, Sub2	Sub1: 2, Sub2: 2

💡 No more emissions; Subject completes or unsubscribes.

Variable Tracker

Variable	Start	After Step 3	After Step 5
subjectValue	undefined	1	2
subscribers	0	1	2

Key Moments - 3 Insights

Why does Sub2 not receive the value 1 when it subscribes after it was emitted?

Because Subject only sends values to subscribers active at the time of emission, as shown in execution_table step 4 where Sub2 subscribes but no output occurs.

How would BehaviorSubject behave differently at step 4?

BehaviorSubject sends the last emitted value immediately to new subscribers, so Sub2 would receive value 1 upon subscribing, unlike Subject.

What does ReplaySubject do differently compared to BehaviorSubject?

ReplaySubject can send multiple past values (not just the last one) to new subscribers, depending on its buffer size.

Visual Quiz - 3 Questions

Look at the execution_table, what output occurs at step 3?

A Sub1: 1

B Sub2: 1

C Sub1: 2

D No output

💡 Hint

Check the Output column at step 3 in execution_table.

At which step does Sub2 start receiving values?

A Step 4

B Step 3

C Step 5

D Step 2

💡 Hint

Look at Subscribers and Output columns for Sub2 in execution_table.

If we replace Subject with BehaviorSubject, what changes at step 4?

A Sub2 receives no values

B Sub2 receives value 1 immediately

C Sub1 stops receiving values

D No change

💡 Hint

Recall BehaviorSubject sends last emitted value to new subscribers.

Concept Snapshot

Subject types in Angular:
- Subject: sends values only to current subscribers
- BehaviorSubject: sends last emitted value immediately to new subscribers
- ReplaySubject: sends last N emitted values to new subscribers
Use Subjects to multicast values to multiple observers
Choose type based on how past values should be replayed

Full Transcript

This lesson shows how Angular's Subject types work. A Subject sends values only to subscribers active when the value is emitted. BehaviorSubject remembers the last value and sends it immediately to new subscribers. ReplaySubject can remember multiple past values and send them to new subscribers. The example code creates a Subject, subscribes one observer, emits a value, then subscribes a second observer who does not get the previous value. When a new value is emitted, both observers receive it. This helps understand how these Subjects behave differently when subscribers join at different times.

Practice

1. Which type of Subject in Angular immediately sends the last emitted value to new subscribers?

easy

A. AsyncSubject

B. BehaviorSubject

C. ReplaySubject

D. Subject

Solution

1. Step 1: Understand BehaviorSubject behavior

   BehaviorSubject stores the last emitted value and sends it immediately to any new subscriber.

2. Step 2: Compare with other Subjects

   Subject sends only to current subscribers without remembering past values. ReplaySubject replays multiple past values, not just the last one.

3. Final Answer:

   BehaviorSubject -> Option B

4. Quick Check:

   Last value sent immediately = BehaviorSubject [OK]

Hint: BehaviorSubject always sends last value to new subscribers [OK]

Common Mistakes:

• Confusing ReplaySubject with BehaviorSubject
• Thinking Subject remembers past values
• Assuming AsyncSubject behaves like BehaviorSubject

2. Which of the following is the correct way to create a ReplaySubject that stores the last 3 values?

easy

A. new ReplaySubject(1)

B. new ReplaySubject()

C. new ReplaySubject(3)

D. new ReplaySubject('3')

Solution

1. Step 1: Check ReplaySubject constructor

   ReplaySubject takes a number argument specifying how many past values to store and replay.

2. Step 2: Validate options

   new ReplaySubject(3) correctly passes number 3. new ReplaySubject() uses no argument (defaults to unlimited or 1 depending on implementation). new ReplaySubject(1) stores only 1 value. new ReplaySubject('3') passes a string, which is invalid.

3. Final Answer:

   new ReplaySubject(3) -> Option C

4. Quick Check:

   ReplaySubject(3) stores last 3 values [OK]

Hint: ReplaySubject(n) stores last n values for new subscribers [OK]

Common Mistakes:

• Passing string instead of number to ReplaySubject
• Omitting the buffer size argument
• Confusing ReplaySubject with BehaviorSubject constructor

3. Consider this code snippet:

const subject = new BehaviorSubject('start');
subject.next('first');
subject.subscribe(value => console.log('Subscriber 1:', value));
subject.next('second');
subject.subscribe(value => console.log('Subscriber 2:', value));

What will be printed to the console?

medium

A. Subscriber 1: startSubscriber 1: firstSubscriber 1: secondSubscriber 2: second

B. Subscriber 1: firstSubscriber 1: secondSubscriber 2: firstSubscriber 2: second

C. Subscriber 1: firstSubscriber 1: secondSubscriber 2: second

D. Subscriber 1: startSubscriber 1: secondSubscriber 2: startSubscriber 2: second

Solution

1. Step 1: Trace BehaviorSubject emissions

   BehaviorSubject starts with 'start', then next emits 'first'. Subscriber 1 subscribes after 'first', so it receives the last value 'first' immediately, then 'second' when emitted.

2. Step 2: Analyze Subscriber 2 subscription

   Subscriber 2 subscribes after 'second' is emitted, so it immediately receives 'second'.

3. Final Answer:

   Subscriber 1: start
   Subscriber 1: first
   Subscriber 1: second
   Subscriber 2: second -> Option A

4. Quick Check:

   BehaviorSubject sends last value on subscribe [OK]

Hint: BehaviorSubject sends last value immediately on subscribe [OK]

Common Mistakes:

• Assuming Subscriber 2 gets 'first' value
• Ignoring initial 'start' emission to Subscriber 1
• Ignoring immediate emission on subscription

4. What is wrong with this code snippet?

const subject = new Subject();
subject.next('hello');
subject.subscribe(value => console.log(value));

medium

A. The subscription will not receive 'hello' because Subject does not replay past values.

B. The code will throw a syntax error because subscribe is called after next.

C. The Subject should be replaced with BehaviorSubject to avoid errors.

D. The next() method cannot be called before any subscribers exist.

Solution

1. Step 1: Understand Subject behavior

   Subject sends values only to current subscribers. Since next('hello') is called before subscribe, no subscriber receives it.

2. Step 2: Check for errors

   There is no syntax or runtime error. The code runs but subscriber misses the first value.

3. Final Answer:

   The subscription will not receive 'hello' because Subject does not replay past values. -> Option A

4. Quick Check:

   Subject sends only to current subscribers [OK]

Hint: Subject does not replay values to late subscribers [OK]

Common Mistakes:

• Expecting subscriber to get values emitted before subscription
• Thinking next() before subscribe causes error
• Confusing Subject with BehaviorSubject or ReplaySubject

5. You want to create a message service that stores the last 2 messages and sends them to any new subscriber immediately. Which Subject type and setup should you use?

hard

A. Use ReplaySubject(1) and call next() twice to replay last 2 messages.

B. Use BehaviorSubject with initial value and call next() twice to store last 2 messages.

C. Use Subject and manually store last 2 messages in an array to send on subscribe.

D. Use ReplaySubject(2) to store and replay last 2 messages to new subscribers.

Solution

1. Step 1: Identify requirement for storing multiple past messages

   BehaviorSubject stores only the last single value, so it cannot replay two messages automatically.

2. Step 2: Choose Subject type that replays multiple past values

   ReplaySubject with buffer size 2 stores and replays last 2 messages automatically to new subscribers.

3. Step 3: Evaluate other options

   Subject does not store past messages. ReplaySubject(1) stores only one message, not two.

4. Final Answer:

   Use ReplaySubject(2) to store and replay last 2 messages to new subscribers. -> Option D

5. Quick Check:

   ReplaySubject(n) replays last n messages [OK]

Hint: ReplaySubject(n) replays last n messages automatically [OK]

Common Mistakes:

• Using BehaviorSubject to store multiple past messages
• Assuming Subject stores past messages
• Setting ReplaySubject buffer size too low