Subject types (Subject, BehaviorSubject, ReplaySubject) in Angular

Introduction

Subjects let you send and receive messages in Angular. Different types help you control how messages are shared and remembered.

You want to share data between parts of your app without direct connection.

You need to remember the last message so new listeners get it right away.

You want new listeners to get a few past messages when they start listening.

Syntax

Angular

import { Subject, BehaviorSubject, ReplaySubject } from 'rxjs';

const subject = new Subject<Type>();
const behaviorSubject = new BehaviorSubject<Type>(initialValue);
const replaySubject = new ReplaySubject<Type>(bufferSize);

Subject sends messages only to current listeners.

BehaviorSubject needs an initial value and remembers the last message.

Examples

Subject sends messages only to subscribers after they subscribe. The first message (1) is missed by the subscriber.

Angular

const subject = new Subject<number>();
subject.next(1);
subject.subscribe(value => console.log('Subject:', value));
subject.next(2);

BehaviorSubject sends the last message (1) immediately to new subscribers, then future messages.

Angular

const behaviorSubject = new BehaviorSubject<number>(0);
behaviorSubject.next(1);
behaviorSubject.subscribe(value => console.log('BehaviorSubject:', value));
behaviorSubject.next(2);

ReplaySubject remembers the last 2 messages (2 and 3) and sends them to new subscribers, then future messages.

Angular

const replaySubject = new ReplaySubject<number>(2);
replaySubject.next(1);
replaySubject.next(2);
replaySubject.next(3);
replaySubject.subscribe(value => console.log('ReplaySubject:', value));
replaySubject.next(4);

Sample Program

This Angular component shows how each subject type behaves when you subscribe and send messages. Buttons let you subscribe to each subject and see console logs.

Angular

import { Component } from '@angular/core';
import { Subject, BehaviorSubject, ReplaySubject } from 'rxjs';

@Component({
  selector: 'app-subject-demo',
  template: `
    <h2>Subject Types Demo</h2>
    <button (click)="subscribeToSubject()">Subscribe to Subject</button>
    <button (click)="subscribeToBehaviorSubject()">Subscribe to BehaviorSubject</button>
    <button (click)="subscribeToReplaySubject()">Subscribe to ReplaySubject</button>
  `
})
export class SubjectDemoComponent {
  subject = new Subject<string>();
  behaviorSubject = new BehaviorSubject<string>('Initial');
  replaySubject = new ReplaySubject<string>(2);

  constructor() {
    this.subject.next('Message 1');
    this.behaviorSubject.next('Message 1');
    this.replaySubject.next('Message 1');
    this.replaySubject.next('Message 2');
  }

  subscribeToSubject() {
    this.subject.subscribe(value => console.log('Subject:', value));
    this.subject.next('Message 2');
  }

  subscribeToBehaviorSubject() {
    this.behaviorSubject.subscribe(value => console.log('BehaviorSubject:', value));
    this.behaviorSubject.next('Message 2');
  }

  subscribeToReplaySubject() {
    this.replaySubject.subscribe(value => console.log('ReplaySubject:', value));
    this.replaySubject.next('Message 3');
  }
}

Important Notes

Subjects are both observers and observables, so you can send and listen to messages.

BehaviorSubject always needs an initial value.

ReplaySubject keeps a buffer of past messages to replay to new subscribers.

Summary

Subject sends messages only to current subscribers.

BehaviorSubject remembers the last message and sends it immediately to new subscribers.

ReplaySubject replays a set number of past messages to new subscribers.