Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
e2e
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

TakeWhileAlive

Build Status npm version

Dependencies

Requires RxJs >= 6.0.0

Installation

npm install take-while-alive

What it does

Automatically unsubscribe any active subscriptions inside Angular components/services using a custom operator. In the background the takeWhile RxJs operator is used.

This prevents leaks that are caused by subscriptions that are still alive even when the component was already destroyed.

How to use it

Before

@Component({
    selector: 'twa-example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.scss']
})
export class ExampleComponent {

    counter = 0;

    constructor() {
        timer(1000, 1000)
        .subscribe(num => {
            this.counter = num;
        });
    }
}

After

import { AutoUnsubscribe, takeWhileAlive } from 'take-while-alive';

...

@Component({
    selector: 'twa-example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.scss']
})
@AutoUnsubscribe() // <<< Add @AutoUnsubsribe() Decorator
export class ExampleComponent {

    counter = 0;

    constructor() {
        timer(1000, 1000)
        .pipe(
            takeWhileAlive(this) // <<< Add takeWhileAlive(this) operator
        )
        .subscribe(num => {
            this.counter = num;
        });
    }
}

How it works

The @AutoUnsubscribe() decorator adds a __isComponentAlive property to the component and creates a ngOnDestroy() function on the class prototype if it not exists. (This is needed because Angular won't call the function if it is not on the prototype when the component class is instantiated)

The takeWhileAlive(...) operator is basically a takeWhile operator that unsubscribes when the __isComponentAlive is false. When ngOnDestroy() is called the __isComponentAlive is set to false. MAGIC!

About

Automatically unsubscribe any active subscriptions inside Angular components/services using a custom operator

Resources

License

Packages

No packages published
You can’t perform that action at this time.