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.