National Pest Management

    @ngneat/until-destroy
    TypeScript icon, indicating that this package has built-in type declarations

    9.2.1 • Public • Published

    🦁 Unsubscribe For Pros

    A neat way to unsubscribe from observables when the component destroyed

    @ngneat/until-destroy npm

    Compatibility with Angular Versions

    @ngneat/until-destroy Angular
    8.x >= 10.0.5 < 13
    9.x >= 13

    Table of contents

    Angular 10 Compatibility

    @ngneat/until-destroy@8+ is compatible only with Angular starting from 10.0.5 version. @ngneat/until-destroy@7 is compatible with Angular versions below 10.0.5. If you have noticed that unsubscribing does not work after some update then check the version of Angular and @ngneat/until-destroy first of all.

    Use with Ivy

    npm install @ngneat/until-destroy
    # Or if you use yarn
    yarn add @ngneat/until-destroy
    import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
    
    @UntilDestroy()
    @Component({})
    export class InboxComponent {
      ngOnInit() {
        interval(1000).pipe(untilDestroyed(this)).subscribe();
      }
    }

    You can set the checkProperties option to true if you want to unsubscribe from subscriptions properties automatically:

    @UntilDestroy({ checkProperties: true })
    @Component({})
    export class HomeComponent {
      // We'll dispose it on destroy
      subscription = fromEvent(document, 'mousemove').subscribe();
    }

    You can set the arrayName property if you want to unsubscribe from each subscription in the specified array.

    @UntilDestroy({ arrayName: 'subscriptions' })
    @Component({})
    export class HomeComponent {
      subscriptions = [
        fromEvent(document, 'click').subscribe(),
        fromEvent(document, 'mousemove').subscribe(),
      ];
    
      // You can still use the operator
      ngOnInit() {
        interval(1000).pipe(untilDestroyed(this));
      }
    }

    You can set the blackList property if you don't want to unsubscribe from one or more subscriptions.

    @UntilDestroy({ checkProperties: true, blackList: ['subscription1'] })
    @Component({})
    export class HomeComponent {
      // subscription1 will not be unsubscribed upon component destruction
      subscription1: Subscription;
      // subscription2 will be unsubscribed upon component destruction
      subscription2: Subscription;
    
      constructor() {
        this.subscription1 = new Subject().subscribe();
        this.subscription2 = new Subject().subscribe();
      }
    }

    Use with Non-Singleton Services

    @UntilDestroy()
    @Injectable()
    export class InboxService {
      constructor() {
        interval(1000).pipe(untilDestroyed(this)).subscribe();
      }
    }
    
    @Component({
      providers: [InboxService],
    })
    export class InboxComponent {
      constructor(inboxService: InboxService) {}
    }

    All options, described above, are also applicable to providers.

    Use with View Engine (Pre Ivy)

    npm install ngx-take-until-destroy
    # Or if you use yarn
    yarn add ngx-take-until-destroy
    import { untilDestroyed } from 'ngx-take-until-destroy';
    
    @Component({})
    export class InboxComponent implements OnDestroy {
      ngOnInit() {
        interval(1000)
          .pipe(untilDestroyed(this))
          .subscribe(val => console.log(val));
      }
    
      // This method must be present, even if empty.
      ngOnDestroy() {
        // To protect you, we'll throw an error if it doesn't exist.
      }
    }

    Use with Any Class

    import { untilDestroyed } from 'ngx-take-until-destroy';
    
    export class Widget {
      constructor() {
        interval(1000).pipe(untilDestroyed(this, 'destroy')).subscribe(console.log);
      }
    
      // The name needs to be the same as the second parameter
      destroy() {}
    }

    Migration from View Engine to Ivy

    To make it easier for you to migrate, we've built a script that will update the imports path and add the decorator for you. The script is shipped as a separate package. Run the following command to install it:

    npm i --save-dev @ngneat/until-destroy-migration
    # Or if you use yarn
    yarn add -D @ngneat/until-destroy-migration

    Then run the following command:

    npx @ngneat/until-destroy-migration --base my/path

    base defaults to ./src/app.

    You can use the --removeOnDestroy flag for empty OnDestroy methods removing.

    npx @ngneat/until-destroy-migration --removeOnDestroy

    You can remove the package once the migration is done.

    Potential Pitfalls

    • The order of decorators is important, make sure to put @UntilDestroy() before the @Component() decorator.
    • When using overrideComponent in unit tests remember that it overrides metadata and component definition. Invoke UntilDestroy()(YourComponent); to reapply the decorator. See here for an example.

    ESLint Rules

    Contributors

    Thanks goes to these wonderful people (emoji key):


    Netanel Basal

    💻 📖 🤔

    Artur Androsovych

    💻 💡 🤔 🚇

    Krzysztof Karol

    🖋

    Alex Malkevich

    💻

    Khaled Shaaban

    💻

    kmathy

    💻

    Dmitrii Korostelev

    💻

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Install

    npm i @ngneat/until-destroy

    DownloadsWeekly Downloads

    123,908

    Version

    9.2.1

    License

    MIT

    Unpacked Size

    111 kB

    Total Files

    25

    Last publish

    Collaborators

    • netanel-ngneat
    • itayod
    • shahar.kazaz
    • overthesanity