Skip to content
Unsubscribe from Observables in Angular Components
Branch: master
Clone or download
Latest commit b0d3b7c Mar 26, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
spec added tests Apr 1, 2018
src
.gitignore initial commit May 24, 2017
.npmignore initial commit May 24, 2017
.travis.yml
CHANGELOG.md - added rx-ninja/tslint rule description Dec 28, 2018
LICENSE WIP Readme Jun 2, 2017
README.md
package-lock.json removed unused code Dec 28, 2018
package.json removed unused code Dec 28, 2018
tsconfig.dist.es2015.json - bundle ES2015 modules to enable tree-shaking Sep 3, 2018
tsconfig.json added tslint rule Nov 24, 2018
tslint.json added tests Apr 1, 2018
typings.json initial commit May 24, 2017

README.md

Build Status npm version

Unsubscribe from Observables in Angular

This library provides utility methods which help to unsubscribe from ReactiveX's Observables in Angular applications.

Why?

Failing to unsubscribe from observables will lead to unwanted memory leaks as the observable stream is left open, potentially even after a component has been destroyed or the user has navigated to another page.

Important: If services are used in Hierarchical Dependency Injectors they are affected by the same memory-leak issue!

This blog post provides additional information:

https://medium.com/thecodecampus-knowledge/the-easiest-way-to-unsubscribe-from-observables-in-angular-5abde80a5ae3

Patrons

❤️ W11K - The Web Engineers

❤️ theCodeCampus - Trainings for Angular and TypeScript

Requirements

  • Requires >= RxJS 6.0.0 (part of Angular 6)

Demo

@Component({
  selector: 'foo',
  templateUrl: './foo.component.html'
})
export class FooComponent implements OnInit, OnDestroy {

  ngOnInit() {
    interval(1000)
        .pipe(
            untilComponentDestroyed(this) // <--- magic is here!
        )
        .subscribe();
  }

  ngOnDestroy() {
  }
  
}

Installation

Download the NPM package

npm i --save @w11k/ngx-componentdestroyed

Prepare the class

The class must have a ngOnDestroy() method (it can be empty):

@Component({
  selector: 'foo',
  templateUrl: './foo.component.html'
})
export class FooComponent implements OnDestroy {

  // ...

  ngOnDestroy() {
  }
  
}

Usage

Either use

  • untilComponentDestroyed(this)
  • takeUntil(componentDestroyed(this))

as the last Observable pipe operator. The TypeScript compiler will ensure that this' class implements a ngOnDestroy() method.

import {interval} from "rxjs";
import {takeUntil} from "rxjs/operators";
import {componentDestroyed} from "@w11k/ngx-componentdestroyed";


interval(1000)
    .pipe(
        untilComponentDestroyed(this)
    )
    .subscribe();

TSLint rule

Our sister project @w11k/rx-ninja provides a TSLint rule to enforce the use a terminator operator. If you want to use untilComponentDestroyed(this) instead of takeUntil(componentDestroyed(this)) please add this configuration:

{
  "rulesDirectory": [
    "node_modules/@w11k/rx-ninja/dist/tslint_rules"
  ],
  "rules": {
    "rx-ninja-subscribe-takeuntil": [true, "takeUntil", "untilComponentDestroyed"]
  }
}
You can’t perform that action at this time.