🤓 Angular - Unsubscribe For Pros 💪

Declarative way to unsubscribe from observables when the component destroyed

Installation

npm install ngx-take-until-destroy --save

Usage

Rxjs 5.5+ (pipeable operators)

import { Component, OnInit, OnDestroy } from '@angular/core';
import { TakeUntilDestroy, untilDestroyed } from 'ngx-take-until-destroy';
import { interval } from 'rxjs/Observable/interval';

@TakeUntilDestroy()
@Component({
  selector: 'app-inbox',
  templateUrl: './inbox.component.html'
})
export class InboxComponent implements OnInit, OnDestroy {
  ngOnInit( ) {
    interval(1000)
      .pipe(untilDestroyed(this))
      .subscribe(val => console.log(val))
  }

  // If you work with AOT this method must be present, even if empty!
  // Otherwise 'ng build --prod' will optimize away any calls to ngOnDestroy,
  // even if the method is added by the @TakeUntilDestroy decorator
  ngOnDestroy() {
    // You can also do whatever you need here
  }

}

Pre rxjs@5.5 (or if you're still patching the observable prototype)

import { Component, OnInit } from '@angular/core';
import { TakeUntilDestroy, OnDestroy } from 'ngx-take-until-destroy';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operators/takeUntil';

@TakeUntilDestroy()
@Component({
  selector: 'app-inbox',
  templateUrl: './inbox.component.html'
})
export class InboxComponent implements OnInit, OnDestroy {
  readonly destroyed$: Observable<boolean>;

  ngOnInit( ) {
    Observable.interval(1000)
      .takeUntil(this.destroyed$)
      .subscribe(val => console.log(val))
  }

  // If you work with AOT this method must be present, even if empty!
  // Otherwise 'ng build --prod' will optimize away any calls to ngOnDestroy,
  // even if the method is added by the @TakeUntilDestroy decorator
  ngOnDestroy() {
    // You can also do whatever you need here
  }

}

Use with any class

Rxjs 5.5+ (pipeable operators)

import { TakeUntilDestroy, untilDestroyed } from 'ngx-take-until-destroy';
import { interval } from 'rxjs/Observable/interval';

@TakeUntilDestroy('destroy')
export class Widget {
  constructor( ) {
    interval(1000)
      .pipe(untilDestroyed(this))
      .subscribe(console.log)
  }

  // The name needs to be the same as the decorator parameter
  destroy() {
  }

}

Before rxjs@5.5 (or if you're still patching the observable prototype)

import { TakeUntilDestroy } from 'ngx-take-until-destroy';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operators/takeUntil';

@TakeUntilDestroy('destroy')
export class Widget {
  readonly destroyed$: Observable<boolean>;

  constructor( ) {
    Observable.interval(1000)
      .takeUntil(this.destroyed$)
      .subscribe(console.log)
  }

  // The name needs to be the same as the decorator parameter
  destroy() {
  }

}