Angular subscribe elegant

by

My favourite unsubscribe pattern is to use takeUntil. takeUntil() accepts an observable, and will stop the subscription when that observable emits a value.

The long-winded way to do this is emit a value in ngOnDestroy().

destroyed = new Subject<void>();

ngOnInit(): void {
  myService.getData().pipe(
    takeUntil(this.destroyed)
  ).subscribe(data => {
    // process data
  });
}

ngOnDestroy(): void {
  this.destroyed.next();
  this.destroyed.complete();
}

This gets quite tedious once you’ve done this a few times. The best solution I’ve seen for this (and currently use) is to set up a shared function that emits the destroyed value for you. Source Credit

import { OnDestroy } from '@angular/core';

import { ReplaySubject, Subject, Observable } from 'rxjs';

export function componentDestroyed(component: OnDestroy): Observable<void> {
  const oldNgOnDestroy: () => void = component.ngOnDestroy;
  const destroyed: Subject<void> = new ReplaySubject<void>(1);
  component.ngOnDestroy = () => {
    oldNgOnDestroy.apply(component);
    destroyed.next(undefined);
    destroyed.complete();
  };
  return destroyed.asObservable();
}

It is then almost trivial to use in your component:

ngOnInit(): void {
  myService.getData().pipe(
    takeUntil(componentDestroyed(this))
  ).subscribe(data => {
    // process data
  });
}

ngOnDestroy(): void {}

All you have to do is implement ngOnDestroy in your component and add takeUntil(componentDestroyed(this)) to your pipe.

More Related Contents:

  1. What is the difference between Subject and BehaviorSubject?
  2. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  3. How to make a sequence of http requests in Angular 6 using RxJS
  4. Best way to import Observable from rxjs
  5. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  6. Behaviour subject initial value null?
  7. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  8. Rxjs Retry with Delay function
  9. Subscribing to a nested Observable
  10. What is pipe for in RxJS?
  11. How to throw error from RxJS map operator (angular)
  12. How to return observable from subscribe
  13. Property ‘toPromise’ does not exist on type ‘Observable’
  14. How to return value inside subscribe Angular 4
  15. Do I need to `complete()` takeUntil Subject inside ngOnDestroy?
  16. How to pass results between chained observables
  17. Observable type error: cannot read property of undefined
  18. How to return value from function which has Observable subscription inside?
  19. No provider for HttpClient
  20. How do I detect user navigating back in Angular2?
  21. Access environment variables in production build Angular 4
  22. Handling refresh tokens using rxjs
  23. Lazy Loading BrowserModule has already been loaded
  24. Angular 2 input parameters on root directive [duplicate]
  25. want to show more data in another component when view in detail button is clicked (angular 6)
  26. ERROR in TypeError: Cannot read property ‘flags’ of undefined
  27. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  28. How to mock Angular 4.3 httpClient an error response in testing
  29. Angular 6 – how to mock router.events url response in unit test
  30. FormControl.detectchanges – why use distinctUntilChanged?

Leave a Comment