BehaviorSubject vs Observable?

Observable is a Generic, and BehaviorSubject is technically a sub-type of Observable because BehaviorSubject is an observable with specific qualities.

The Unique features of a subject compared to an observable are:

• It is an observer in addition to being an observable so you can also send values to a subject in addition to subscribing to it.

BehaviorSubject

BehaviorSubject is an exact copy of Subject. The only difference is an initial value must be provided while initializing the behavior subject and it provides the latest value right after subscription.

The unique features of BehaviorSubject are:

• It needs an initial value as it must always return a value on subscription even if it hasn’t received a next()
• Upon subscription, it returns the last value of the subject. A regular observable only triggers when it receives an onnext
• at any point, you can retrieve the last value of the subject in a non-observable code using the getValue() method.

let subject = new BehaviorSubject<string>('sending initial data');
subject.subscribe((data) => {
  console.log("incoming from one component : "+ data);
});
subject.subscribe((data) => {
  console.log("incoming from another component : "+ data);
});// sending data
subject.next("Sending 1");
subject.next("Sending 2");

Subject

Subject is an observable which is also an observer and multicast meaning any changes in the Subject will be reflected automatically to every subscriber. Basically, Subject acts like a radio broadcast system which reflects all the program to all of its subscribers every time.

let subject = new Subject<string>();
subject.subscribe((data) => { //recieving data
  console.log("incoming from one component : "+ data);
});
subject.subscribe((data) => {
  console.log("incoming from another component : "+ data);
});
subject.next("Sending 1");// sending data
subject.next("Sending 2");

An observable can be created from both Subject and BehaviorSubject using subject.asObservable().

The only difference being you can’t send values to an observable using next() method.

tip

In Angular services, I would use BehaviorSubject for a data service as an angular service often initializes before component and behavior subject ensures that the component consuming the service receives the last updated data even if there are no new updates since the component's subscription to this data.

When to use Subject & BehaviorSubject?

We now clearly know the difference between Subject and BehaviorSubject.

Subject on subscription doesn't provide any initial value while BehaviorSubject provides value on subscription. So, in the situation where you are confident that the initial value will be is something we use BehaviorSubject.

For example, let's take an example of a showing image on a user's profile. Upon unavailability of the image from the user, we need to show a default placeholder image. So, in such a case, we know a default value for the image is always a placeholder image. So, we use BehaviorSubject instead of Subject.

In case, where no image must be shown if the user doesn't upload any photo, Subject must be used.

Subject and BehaviorSubject helps us to reflect data changes in various component very easily. Thus, reducing the hassle of calling the same services with various other techniques.