DEV Community

Angular : RxJS BehaviorSubject

diptee on October 29, 2021

As we know multiple components share the common data and always need updated shared data. In such scenarios most of the time BehaviorSubject is use...

Read full post

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();
 }
}