Skip to main content

RXJS: Clean Up Subscriptions

Examples of cleaning up subscriptions​

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

// Set ...implements OnDestroy on your component's/view's class definition

// Define Subscription
apiCallSubscription: Subscription;

// Assign the Subscription
this.apiCallSubscription = this.someService.getSomeData(...).subscribe(...);

// Clean up the Subscription
ngOnDestroy() {
  if(this.apiCallSubscription) {
    this.apiCallSubscription.unsubscribe();
  }
}

.take()​

import { take } from 'rxjs/operators';

.pipe(take(1)).subscribe(...)

.takeUntil()​

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

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';


/**
 * @ignore
 */
destroy = new Subject();


.pipe(takeUntil(this.destroy)).subscribe(...)


/**
 * Perform a little cleanup
 */
ngOnDestroy() {
  // Clean up the subscriptions
  this.destroy.next();
  this.destroy.complete();
}