RxJS: takeUntil() Angular component’s ngOnDestroy()

by

You could leverage a ReplaySubject for that:

EDIT: Different since RxJS 6.x:
Note the use of the pipe() method.

class myComponent {
  private destroyed$: ReplaySubject<boolean> = new ReplaySubject(1);

  constructor(
    private serviceA: ServiceA,
    private serviceB: ServiceB,
    private serviceC: ServiceC) {}

  ngOnInit() {
    this.serviceA
      .pipe(takeUntil(this.destroyed$))
      .subscribe(...);
    this.serviceB
      .pipe(takeUntil(this.destroyed$))
      .subscribe(...);
    this.serviceC
      .pipe(takeUntil(this.destroyed$))
      .subscribe(...);
  }

  ngOnDestroy() {
    this.destroyed$.next(true);
    this.destroyed$.complete();
  }
}

This is only valid for RxJS 5.x and older:

class myComponentOld {
  private destroyed$: ReplaySubject<boolean> = new ReplaySubject(1);

  constructor(private serviceA: ServiceA) {}

  ngOnInit() {
    this.serviceA
      .takeUntil(this.destroyed$)
      .subscribe(...);
  }

  ngOnDestroy() {
    this.destroyed$.next(true);
    this.destroyed$.complete();
  }
}

More Related Contents:

  1. What is the correct way to share the result of an Angular Http network call in RxJs 5?
  2. Best way to “flatten” an array inside an RxJS Observable
  3. What is pipe for in RxJS?
  4. Angular/RxJS When should I unsubscribe from `Subscription`
  5. What is the difference between Subject and BehaviorSubject?
  6. Is it necessary to unsubscribe from observables created by Http methods?
  7. Hot and Cold observables: are there ‘hot’ and ‘cold’ operators?
  8. Convert Promise to Observable
  9. How to communicate between component in Angular?
  10. How to make HTTP request at an interval?
  11. Angular – shared service between components doesn’t work
  12. Passing Data with Subjects and Proxies
  13. How can I communicate between two child components in angular? [duplicate]
  14. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  15. How to make an http call every 2 minutes with RXJS?
  16. Angular 7 – nesting Observables
  17. Making sure observables in for loop are all finished before executing other code
  18. Best way to import Observable from rxjs
  19. How to “communicate” between components in Angular?
  20. Behaviour subject initial value null?
  21. Observable.of is not a function
  22. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  23. Angular 2 Observable with multiple subscribers
  24. How to make nested Observable calls in Angular2
  25. How to correctly import operators from the `rxjs` package
  26. How to throw error from RxJS map operator (angular)
  27. Angular 5 to 6 Upgrade: Property ‘map’ does not exist on type Observable
  28. Do I need to `complete()` takeUntil Subject inside ngOnDestroy?
  29. How to send 1000 XHTTP Requests with maximum number of parallel requests
  30. What is the difference between component and directive?

Leave a Comment