Angular unsubscribe from BehaviorSubject as Observable

Question

I create a BehaviorSubject in one of my services, and using it asObservable to subscribe to it later, but i need to unsubscribe after the controller is destroyed, how can i unsubscribe from it.

Services

import { Observable, BehaviorSubject } from 'rxjs';

  private currentStepObject = new BehaviorSubject<number>(0);
  public currentStepObservable = this.currentStepObject.asObservable();

  constructor(
  ) { }

  public changecurrentStep(step: number): void {
    this.currentStepObject.next(step);
  }

Controller

 import { ReaderService } from '../../../../services/reader/reader.service';

   constructor(
    private readerServices: ReaderService
   ) { }

   ngOnInit() {
     this.initDocumentData();
     this.readerServices.currentStepObservable
      .subscribe((step) => {
        this.currentStep = step;
      });
  }

  ngOnDestroy() {
  }

Here by the maintainer of RxJS: https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87 — t3__rry, Sep 17 '18 at 14:04
Possible duplicate of [Angular/RxJs When should I unsubscribe from \`Subscription\`](https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription) — Franklin Pious, Sep 17 '18 at 14:05

score 17 · Accepted Answer · answered Sep 17 '18 at 14:02

try takeUntil with helpful inner Subject.

UPDATE: In this case you don't have to manually unsubscribe from each subscription in a component, because you may have a bit more than one inside.

import { ReaderService } from '../../../../services/reader/reader.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'

export class MyComponent implements OnInit, OnDestroy {

  private unsubscribe$: Subject<any> = new Subject<any>();
  constructor(
    private readerServices: ReaderService
  ) { }

  ngOnInit() {
    this.initDocumentData();
    this.readerServices.currentStepObservable.pipe(
      takeUntil(this.unsubscribe$)
    )
    .subscribe((step) => {
      this.currentStep = step;
    });
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}

SiddAjmera · Answer 2 · 2018-09-17T14:19:08.707

Assign it to a subscription variable of type Subscription that can be imported from rxjs and then unsubscribe from it in the ngOnDestroy

import { ReaderService } from '../../../../services/reader/reader.service';
import { Subscription } from 'rxjs';

subscription: Subscription;

constructor(
  private readerServices: ReaderService
) {}

ngOnInit() {
  this.initDocumentData();
  this.subscription = this.readerServices.currentStepObservable
    .subscribe(step => this.currentStep = step);
}

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

OR use `async` pipe in the template:

import { ReaderService } from '../../../../services/reader/reader.service';

currentStep$;

constructor(
  private readerServices: ReaderService
) {}

ngOnInit() {
  this.initDocumentData();
  this.currentStep$ = this.readerServices.currentStepObservable;
}

And then in the template:

{{ this.currentStep$ | async }}

This way, you won't have to take care of unsubscribeing from the Observable and Angular will take care of it.

score 1 · Answer 3 · answered Sep 17 '18 at 16:22

Each Observable.subscribe() returns a subscription. It would be better to create a subscriptions array and add all the subscriptions in it. On destroy of component(ngOnDestroy lifecycle hook), loop through the subscriptions array and call unsubscribe on it.

Doing this you need not to manage different subscription from different subscriber.

score 0 · Answer 4 · answered Sep 17 '18 at 14:01

You can do something like this

 import { ReaderService } from '../../../../services/reader/reader.service';
 subscription : Subscription;

 constructor(
 private readerServices: ReaderService
   ) { }

 ngOnInit() {
 this.initDocumentData();
 this.subscription = this.readerServices.currentStepObservable
  .subscribe((step) => {
    this.currentStep = step;
  });
   }

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

Angular unsubscribe from BehaviorSubject as Observable

4 Answers4

OR use async pipe in the template:

OR use `async` pipe in the template: