Nutella Per Minute

    TypeScript icon, indicating that this package has built-in type declarations

    5.0.2 • Public • Published

    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.


    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:


    ❤️ W11K - The Web Engineers

    ❤️ theCodeCampus - Trainings for Angular and TypeScript

    First: Check your Angular version!

    If you are using Angular <= 8 or Angular 9 with ViewEngine instead of Ivy, you have to use a previous version of this library. Please see ViewEngine usage for further instructions. If you are using the latest Angular version and if you have no idea what ViewEngine or Ivy is, just continue with the instructions below.


        selector: 'foo',
        templateUrl: './foo.component.html'
    export class FooComponent 
                extends OnDestroyMixin                  // <--- 1. extend OnDestroyMixin 
                implements OnInit { 
        ngOnInit() {
                    untilComponentDestroyed(this)       // <--- 2. use the pipe operator

    The TypeScript compiler will check that your component extends OnDestroyMixin when you try to use untilComponentDestroyed.


    Download the NPM package

    npm i --save @w11k/ngx-componentdestroyed


    Prepare the class

    Your component class must extend OnDestroyMixin:

    import {OnDestroyMixin} from "@w11k/ngx-componentdestroyed";
        selector: 'foo',
        templateUrl: './foo.component.html'
    export class FooComponent extends OnDestroyMixin {  // <--- HERE 

    Use the pipe operator

    Either use

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

    as the last Observable pipe operator.

    import {interval} from "rxjs";
    import {takeUntil} from "rxjs/operators";
    import {untilComponentDestroyed} from "@w11k/ngx-componentdestroyed";
            untilComponentDestroyed(this)               // <--- HERE

    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 to your tslint.json file:

      "rulesDirectory": [
      "rules": {
        "rx-ninja-subscribe-takeuntil": [true, "takeUntil", "untilComponentDestroyed"]

    A note on Ivy, ViewEngine, AoT on/off, Karma, Jest, ...

    We tried everything but the current state of Angular's Ivy compilation is a f@#!ing nightmare:

    • Base classes do not work with ViewEngine
    • Ivy doesn't work with patching at runtime (this library version <= 4)
    • Decorator tricks rely on Angular internals and will break in the future ...
    • ... they don't work with Karma or Jest
    • ... but even if the don't break, they don't work with AoT compilation turned off


    npm i @w11k/ngx-componentdestroyed

    DownloadsWeekly Downloads






    Unpacked Size

    34 kB

    Total Files


    Last publish


    • pburgmer
    • m_sallat
    • fvonberg
    • sengmann
    • kaihenzler
    • romanroe