Custom rxjs operator to automatically unsubscribe any subscription when an Angular component/service is destroyed
npm install take-while-aliveRequires RxJs >= 6.0.0
``
npm install take-while-alive
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.
> Before
`ts
@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
`ts
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;
});
}
}
`
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!