What is the difference between Subject, BehaviorSubject, and ReplaySubject?

Q: What is the difference between Subject, BehaviorSubject, and ReplaySubject?

**Target Audience:** Angular developers who have used subscribe() but are fuzzy on the Subject family. No RxJS internals assumed. **Difficulty:** Medium > **How to read this doc:** Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Every behaviour claim in sections 4 to 6 was produced by running RxJS 7.8.2, and the example in section 7 was compiled and clicked through on Angular 22.2.3. ## 1. Why This Even Matters — A Story First Picture three ways a teacher can run a classroom when a student arrives late. The first teacher just keeps talking. Whatever was said before you walked in is gone; you hear only what comes next. That is a **Subject**. The second teacher has a whiteboard with today's single most important fact written on it. When you walk in you read the board, so you are instantly up to date, and then you hear everything new. Before class starts the board alread

The problem

Question presented to candidate: "We keep the logged-in user in a service and several components subscribe to it, some of them long after login. Which kind of Subject would you use, and how do Subject, BehaviorSubject and ReplaySubject differ?"

What a strong answer should cover:

A Subject is both an Observable and an Observer: it multicasts each next() to every current subscriber, and is hot (values sent before you subscribe are gone).
The three differ in what a late subscriber receives: Subject gives nothing from the past, BehaviorSubject gives the current value (it needs an initial one), ReplaySubject(n) replays the last n values (optionally limited by a time window).
BehaviorSubject exposes a synchronous getValue() / value; ReplaySubject has no initial value and no getter.
After complete() a late subscriber of a BehaviorSubject gets only the completion, while a ReplaySubject still replays its buffer.
Expose subjects with asObservable() so only the owning service can call next(); in modern Angular a signal() often replaces a BehaviorSubject for UI state.
Mention AsyncSubject (emits only the last value, on complete) as the fourth variant.

Clarifying questions expected:

"Does a component that subscribes later need the current value, or only future changes?"
"Is this UI state the template reads (a signal might fit better) or an event stream?"

Code / implementation expected: Yes — a small service or component that shows what a late subscriber gets from each subject.

rxjs
subject

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Angular developers who have used subscribe() but are fuzzy on the Subject family. No RxJS internals assumed. Difficulty: Medium

How to read this doc: Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Every behaviour claim in sections 4 to 6 was produced by running RxJS 7.8.2, and the example in section 7 was compiled and clicked through on Angular 22.2.3.

1. Why This Even Matters — A Story First

Picture three ways a teacher can run a classroom when a student arrives late.

The first teacher just keeps talking. Whatever was said before you walked in is gone; you hear only what comes next. That is a Subject.

The second teacher has a whiteboard with today's single most important fact written on it. When you walk in you read the board, so you are instantly up to da

The solution is hidden so you can try first

11 min read · 10 sections

Read the code

AngularLate subscriber: what Subject, BehaviorSubject(0) and ReplaySubject(2) hand over

Open in playground

import { Component, OnDestroy, signal } from "@angular/core";
import { BehaviorSubject, ReplaySubject, Subject, Subscription } from "rxjs";

// Three kinds of Subject receive the same values. A "late" subscriber joins
// after two values have already been sent, so you can see what each one replays.
@Component({
  selector: "app-root",
  template: `
    <button (click)="emit()">next({{ counter() + 1 }})</button>
    <button (click)="addLate()" [disabled]="lateAdded()">Add late subscriber</button>
    <ul>
      <li>Subject: {{ logs.subject().join(", ") || "-" }}</li>
      <li>BehaviorSubject(0): {{ logs.behavior().join(", ") || "-" }}</li>
      <li>ReplaySubject(2): {{ logs.replay().join(", ") || "-" }}</li>
    </ul>
    <p>Current BehaviorSubject value: {{ current() }}</p>
  `,
})
export class AppComponent implements OnDestroy {
  private subject = new Subject<number>();
  private behavior = new BehaviorSubject<number>(0);
  private replay = new ReplaySubject<number>(2);
  private subs = new Subscription();

  counter = signal(0);
  lateAdded = signal(false);
  current = signal(this.behavior.getValue());
  // What the LATE subscriber has received from each subject.
  logs = { subject: signal<string[]>([]), behavior: signal<string[]>([]), replay: signal<string[]>([]) };

  emit() {
    const n = this.counter() + 1;
    this.counter.set(n);
    this.subject.next(n);
    this.behavior.next(n);
    this.replay.next(n);
    this.current.set(this.behavior.value);
  }

  addLate() {
    this.lateAdded.set(true);
    const track = (key: "subject" | "behavior" | "replay") => (v: number) =>
      this.logs[key].update((l) => [...l, "got " + v]);
    this.subs.add(this.subject.subscribe(track("subject")));
    this.subs.add(this.behavior.subscribe(track("behavior")));
    this.subs.add(this.replay.subscribe(track("replay")));
  }

  ngOnDestroy() {
    this.subs.unsubscribe();
  }
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.