Subject types (Subject, BehaviorSubject, ReplaySubject) in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Behavior of Subject when subscribing late

Consider an Angular component using Subject from RxJS. The Subject emits values before a subscriber subscribes. What will the subscriber receive?

Angular

import { Subject } from 'rxjs';

const subject = new Subject<number>();
subject.next(1);
subject.next(2);

subject.subscribe(value => console.log('Subscriber received:', value));
subject.next(3);

A Subscriber received: 1, 2, 3

B Subscriber received: 3

C Subscriber received: 1, 2

D No output

💡 Hint

Think about whether Subject stores past values for new subscribers.

A Subject does not replay past values. Subscribers only receive values emitted after they subscribe. So the subscriber only gets the value 3 emitted after subscription.

❓ component_behavior

intermediate

BehaviorSubject initial value and subscription

What will be logged when subscribing to a BehaviorSubject that was created with an initial value and has emitted new values before subscription?

Angular

import { BehaviorSubject } from 'rxjs';

const behaviorSubject = new BehaviorSubject<number>(0);
behaviorSubject.next(1);
behaviorSubject.next(2);

behaviorSubject.subscribe(value => console.log('Subscriber received:', value));

A Subscriber received: 0

B Subscriber received: 0, 1, 2

C Subscriber received: 1

D Subscriber received: 2

💡 Hint

Remember that BehaviorSubject always emits the latest value to new subscribers.

A BehaviorSubject emits the most recent value to new subscribers immediately upon subscription. Since the last emitted value was 2, the subscriber receives 2.

❓ state_output

advanced

ReplaySubject buffer size effect

Given a ReplaySubject with buffer size 2, what values will a late subscriber receive if the subject emitted 4 values before subscription?

Angular

import { ReplaySubject } from 'rxjs';

const replaySubject = new ReplaySubject<number>(2);
replaySubject.next(10);
replaySubject.next(20);
replaySubject.next(30);
replaySubject.next(40);

replaySubject.subscribe(value => console.log('Subscriber received:', value));

A Subscriber received: 30, 40

B Subscriber received: 40

C Subscriber received: 10, 20, 30, 40

D No output

💡 Hint

ReplaySubject replays the last bufferSize values to new subscribers.

The ReplaySubject with buffer size 2 stores the last two emitted values. So the subscriber receives 30 and 40 immediately upon subscription.

📝 Syntax

advanced

Correct usage of BehaviorSubject to hold string state

Which option correctly creates a BehaviorSubject holding a string and emits a new value?

A const subject = new BehaviorSubject<string>(); subject.next('next');

B const subject = new BehaviorSubject('start'); subject.emit('next');

C const subject = new BehaviorSubject<string>('start'); subject.next('next');

D const subject = BehaviorSubject<string>('start'); subject.next('next');

💡 Hint

Check the constructor syntax and method names for BehaviorSubject.

Option C correctly uses the constructor with an initial value and calls next to emit a new value. Option C uses a non-existent emit method. Option C misses the new keyword. Option C misses the required initial value in constructor.

🔧 Debug

expert

Why does this ReplaySubject not replay values?

In this Angular service, a ReplaySubject is created but subscribers do not receive any past values. What is the cause?

Angular

import { ReplaySubject } from 'rxjs';

export class DataService {
  private replaySubject = new ReplaySubject<number>(3);

  emitValues() {
    this.replaySubject.next(1);
    this.replaySubject.next(2);
    this.replaySubject.next(3);
  }

  getValues() {
    return this.replaySubject.asObservable();
  }
}

// In component
const service = new DataService();
service.emitValues();
service.getValues().subscribe(value => console.log('Received:', value));

A The subscription happens after emitValues, but the ReplaySubject is recreated each time, losing previous values.

B ReplaySubject buffer size is too small to hold emitted values.

C The subscription happens after emitValues, so ReplaySubject should replay values correctly.

D ReplaySubject does not replay values to late subscribers.

💡 Hint

Check if the ReplaySubject instance is the same when emitting and subscribing.

If the ReplaySubject is recreated or a new instance is used when subscribing, previous values are lost. In this code, if DataService is instantiated multiple times or the ReplaySubject is recreated, subscribers won't get past values.

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