diptee

Posted on Oct 29, 2021 • Edited on Nov 7, 2021

Angular : RxJS BehaviorSubject

#javascript #typescript #webdev #angular

As we know multiple components share the common data and always need updated shared data. In such scenarios most of the time BehaviorSubject is used which acts as a single store to hold updated shared data.

BehaviorSubject is both observer and type of observable.
BehaviorSubject always need an initial/default value.
Every observer on subscribe gets current value.
Current value is either latest value emitted by source observable using next() method or initial/default value.

Let’s implement BehaviorSubject to understand a concept better!

For e.g In order tracking app, display total items in cart and total items in wish list on UI in header and dashboard section based on user action.

Now we have three components -
HeaderComponent, DashBoardComponent, TableComponent

Run Live

When user add items in the cart/wishList, total count needs to be updated in the header and dashboard component.

1.First create a BehaviorSubject in order service which holds the initial state of order count ,so that it can be used by any component.

2.Now all observers(3 components) need to subscribe to source observable to get current value and show it on UI.

3.When a user performs any action, call the next() method of BehaviorSubject. When the next() method gets called it will update current count with new count and notifies updated count to all observers(3 Components) who subscribed to source observable.

This way BehaviorSubject makes components communication more effective.

P.S. Don't forget to unsubscribe all subscriptions in ngOnDestroy() to avoid memory leaks & unexpected output.

Thanks for reading! If you found this helpful please share!

Top comments (13)

Kristiqn Tachev • Nov 1 '21 • Edited

Everything is awesome but there is one thing you should pay attention.

By subscribing inside ngOnInit you are introducing a memory leak since this hook will be triggered on component initialization.

For example going to page / and then /orders for example. Go back and forward a few times and print out console.log inside the subscription. You should get a multiple console log printing instead of one. This is because you are not unsubscribing from the observable.

One way to mitigate this issue is by letting html template to subscribe for you using async pipe

<div>{{ orderCount | async }}</div>

Inside the ngOnInit you just need to define the observable

ngOnInit(){
  this.orderCount = this.orderService.getOrderCount();
}

In some cases when you need to subscribe for example to router change event you don't need to subscribe inside the template so you can use a different approach

import { Subscription } from 'rxjs';
class MyComponent {
 subscription: Subscription;
 ngOnInit() {
  this.subscription = this.orderService.getOrderCount().subscribe();
 }

 ngOnDestroy() {
  if (this.subscription) {
   this.subscription.unsubscribe();
  }
 }

}

Cheers!

George Koval. • Nov 14 '21

You maybe interested to unsubscribe using takeUntil instead of saving the subscription and manually unsubscribing (you can have multiple subscriptions and it's not that convenient to manually unsubscribe from all of them).

Ali Helmi • Sep 26 '22

Can you please post an article explaining how to use "TakeUntil" to unsubscribe all subscriptions?

diptee • Nov 2 '21

Thanks for mentioning this point!
Yes it is necessary to unsubscribe Subject, BehaviorSubject subscriptions in ngOnDestroy() to avoid memory leaks & unexpected output.

sekhar • Nov 7 '21

Fantastic blog

Ali Helmi • Sep 26 '22

Can you please post an article explaining how to use "TakeUntil" to unsubscribe all subscriptions?

Kristiqn Tachev • Sep 29 '22

Here you go mate :)

import { Subscription } from 'rxjs';

class MyComponent {

 destroy$ = new Subject();

 ngOnInit() {
   this.orderService.getOrderCount().pipe(takeUntil(this.destroy$)).subscribe();
 }

 ngOnDestroy() {
  this.destroy$.complete();
 }
}