BehaviorSubject vs. Observable in Angular

1. Primary Difference Between BehaviorSubject and Observable in Angular
2. What Is Observable in Angular
3. What Is BehaviorSubject in Angular
4. Example of BehaviorSubject in Angular

Angular BehaviorSubject is a subject that emits the last value emitted by the source Observable. In contrast, observable is used to emit values over time.

Angular uses them to handle events or data streams, such as HTTP requests or user input. They are also typically used when an observer needs to be notified of the object’s state changes.

In detail, let’s discuss the difference between BehaviorSubject and Observable.

Primary Difference Between BehaviorSubject and Observable in Angular

BehaviorSubject is Angular observable with defined features; it is theoretically a sub-type of Observable; Observable is generic. A subject can be used to construct an observable with the help of BehaviorSubject.

The primary difference is that you can’t use the next() method to deliver data to an observable.

Let’s discuss the basic concepts of Angular Observable and BehaviorSubject.

What Is Observable in Angular

In an Angular application, RxJS provides observables; observables facilitate data sharing between authors and users.

Observable is a better strategy for event management, asynchronous computing, and managing multiple attributes.

A unique aspect of Observables is that they can only be handled by a user who has subscribed to them like a component is not implemented by the subscribed consumer. The user can only receive updates until they have subscribed.

What Is BehaviorSubject in Angular

Generally, the subject is implemented in three ways, each of which provides different capabilities and can be applied for various applications.

1. ReplaySubject: This object keeps track of all the values that have been pushed. It distributes all of the items emitted by the source to all observers that have subscribed to it.
2. BehaviorSubject: It is the one that stores the current value. An observer who subscribes to BehaviorSubject will receive a value over time as it does so.
3. AsyncSubject: It saves the most recent value and transmits it whenever the sequence is finished.

BehaviorSubject in Angular allows you to send and retrieve values to an Observable. The access control status, for example, is a BehaviorSubject that provides a value that evolves.

In this scenario, the BehaviorSubject's primary goal is to ensure that every user receives the final value.

Because it must always provide a value on subscription, even if it hasn’t acquired the next value, the behavior topic requires a starting value. It returns the subject’s most recent value upon subscription.

The getValue() method can be used to access the subject’s last value in non-observable code at any time.

Moreover, an argument is supplied to the BehaviorSubject function Object() to reflect the initial state. When a requirement for a state is established and any further subscriptions are made, BehaviorSubject will provide the most current state first.

Example of BehaviorSubject in Angular

To get a better idea of the discussion mentioned above, let’s discuss an example.

App.component.ts:

import { Component } from "@angular/core";
import { BehaviorSubject } from "rxjs";
interface Directory {
  name: string;
  id: string;
}
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name: string;
  id: string;

  directories: BehaviorSubject<Directory[]> = new BehaviorSubject<Directory[]>(null);
  constructor() {
    this.directories.next([
    ]);
  }
  add() {
    const currentItems = this.directories.getValue();
    currentItems.push({ name: this.name, id: this.id });
  }
  delete() {
    const currentItems = this.directories.getValue();
    const itemsWithoutDeleted = currentItems.filter(d => d.id !== this.id);
    this.directories.next(itemsWithoutDeleted);
  }
}

App.component.html:

<h1>Example of Angular BehaviorSubject</h1>
<h3>Write anything in the box that you want to add in the directory list.</h3>
<ul>
	<li *ngFor="let directory of (directories | async)">
		{{ directory.name }}
	</li>
</ul>
<input type="text" [(ngModel)]="name" size="20" />
<br/>
<br/>
<button (click)="add()">Add</button>
<br/>
<br/>
<button (click)="delete()">Delete</button>
<hr />

BehaviorSubject emits the last value emitted by the source Observable, which can be helpful if you need to keep an up-to-date value for a specific time frame.

Observables are helpful when you need to know every change in a data set but are not as efficient as BehaviorSubject when updating data with new values.

Click here to check the live demonstration of the code.