take-until-destroy

take-until-destroy

A simple way to unsubscribe from an RxJs stream in Angular (6.0+) when the component is destroyed

For an overview of how this works see this post about unsubscription in angular

Installation

npm install take-until-destroy --save || yarn add take-until-destroy

Use

 import { Destroyable, takeUntilDestroy } from 'take-until-destroy'
 
 // If you have already implemented `OnDestroy`, you don't need the `@Destroyable` decorator.
 @Destroyable
 @Component({
   ...
 })
 export class ExampleComponent {
    constructor(randomService: RandomService) {
        randomService.getObservable
            .pipe(takeUntilDestroy(this))
            .subscribe(v => {
                console.log(v)
            })
    }
 }

Known Issues

The @Destroyable decorator doesn't work in production. See https://github.com/jsdevtom/take-until-destroy/issues/7 for updates. The current fully working work around is to simply implement OnDestroy for you component and it will work as expected. Example:

 import { Destroyable, takeUntilDestroy } from 'take-until-destroy'
 
 @Component({
   ...
 })
 export class ExampleComponent implements OnDestroy {
    constructor(randomService: RandomService) {
        randomService.getObservable
            .pipe(takeUntilDestroy(this))
            .subscribe(v => {
                console.log(v)
            })
    }
    
    ngOnDestroy() {/**/}
 }