@ngneat/until-destroy-migration

The script that helps to migrate from View Engine to Ivy

Usage no npm install needed!

<script type="module">
  import ngneatUntilDestroyMigration from 'https://cdn.skypack.dev/@ngneat/until-destroy-migration';
</script>

README

🦁 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!