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

10.0.0 • 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

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!

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
10.0.084,580latest

Version History

VersionDownloads (Last 7 Days)Published
10.0.084,580
10.0.0-beta.01,648
9.2.364,414
9.2.27,930
9.2.11,626
9.2.01,885
9.1.216
9.1.15
9.1.05
9.0.21,704
9.0.1138
9.0.03,690
8.1.421,409
8.1.337
8.1.23
8.1.1495
8.1.09
8.0.41,380
8.0.3545
8.0.2184
8.0.1294
8.0.0145
7.3.2658
7.3.15
7.3.030
7.2.033
7.1.634
7.1.540
7.1.40
7.1.31
7.1.20
7.1.133
7.1.01
7.0.00
6.0.010

Package Sidebar

Install

npm i @ngneat/until-destroy

Weekly Downloads

192,987

Version

10.0.0

License

MIT

Unpacked Size

86.3 kB

Total Files

22

Last publish

Collaborators

  • netanel-ngneat
  • overthesanity