Subject vs. BehaviourSubject vs. ReplaySubject in Angular
2 min read

Subject vs. BehaviourSubject vs. ReplaySubject in Angular

Observables are the core of reactive programming, and they enable us to work with asynchronous data and callbacks a lot easier. But, what's the difference btw different types of Angular Subjects? Let's dive in.
Subject vs. BehaviourSubject vs. ReplaySubject in Angular

Observables are mainly the functions that allow us to pass messages inside our application. They can be thought of as an upgrade version of the simple promises. However, we also have subjects in the react programming that are a particular case of Observables. We will discuss different subjects in this article. So, let us get started.

Angular Subject

The most significant difference between subject and observable is the casting properties.

A simple observable is a unicast, i.e., it can cast to a single observer only. In contrast, Subjects are a special kind of observables that enable us to send data to multiple components or services. It has the power to multicast many observes, which makes a subject an observer and an observable at the same time. It is noted that subjects do not possess any initial value, and they behave like event emitters.

The code below explains the working of Subjects.

import { Subject } from 'rxjs';
const subject = new Subject<String>();
subject.subscribe({
	next: (v) => console.log(`observer 1: ${v}`)
});
subject.subscribe({
	next: (v) => console.log(`observer 2: ${v}`)
});
subject.next(“Hello”);
subject.next(“Hi”);
// Output:
// observer 1: Hello
// observer 2: Hello
// observer 1: Hi
// observer 2: Hi
Angular simple Subject example

Behavior Subject

A behavior subject is a type of subject that can be initialised with a value, and it will print the initial value even if it has not received a next().

Moreover, Behavior Subjects keep track of the last values, and whenever there is a new subscriber, it will get the previous value, and log it.

This can be seen in the code below.

import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject(0); // 0 is the initial value

subject.subscribe({
  next: (v) => console.log(`observer 1: ${v}`)
});

subject.next(1);
subject.next(2);

subject.subscribe({
  next: (v) => console.log(`observer 2: ${v}`)
});

// Output:
// observer 1: 0
// observer 1: 1
// observer 1: 2
// observer 2: 2
Angular Behavior Subject example

The Behavior Subject has 0 value at the start, and when observer 1 subscribes to it, it will log it. We can see observer 2 subscribe after the value 2, but it still logs it.

This shows the tracking of the last value by Behavior Subject.

Replay Subject

It works similar to Behavior Subject expect that it can keep track of multiple previous values and reply to them for the new subscribers. Furthermore, you can also specify the window for tracking the older values.

Let us see Reply Subject’s working.

import { ReplaySubject } from 'rxjs';
const subject = new ReplaySubject(3); // stores 3 values for new subscribers
 
subject.subscribe({
  next: (v) => console.log(`observer 1: ${v}`)
});
 
subject.next(1);
subject.next(2);
subject.next(3);
subject.next(4);
 
subject.subscribe({
  next: (v) => console.log(`observer 2: ${v}`)
});
 
subject.next(5);

// Output:
// observer 1: 1
// observer 1: 2
// observer 1: 3
// observer 1: 4
// observer 2: 2
// observer 2: 3
// observer 2: 4
// observer 1: 5
// observer 2: 5
Angular Reply Subject example

As you can see, observer 2 gets 3 previous values after subscribing, as set during Replay Subject's initialization.

Conclusion

We have seen Subject, Behavior Subject, and Reply Subject in this article, each having its use case.

  • Subjects are mainly used for multicasting the data.
  • Behavior Subjects gets an initializing value and keeps track of the last value.
  • Reply Subjects can maintain a buffer of values and pass them to new subscribers.

Thanks for reading, and see you on next articles.

Enjoying these posts? Subscribe for more