ngneat / Until Destroy
Programming Languages
Projects that are alternatives of or similar to Until Destroy
🦁 Unsubscribe For Pros
A neat way to unsubscribe from observables when the component destroyed
Table of contents
- Angular 10 Compatibility
- Use with Ivy
- Use with View Engine (Pre Ivy)
- Migration from View Engine to Ivy
- Potential Pitfalls
- Contributors
Angular 10 Compatibility
@ngneat/[email protected]+
is compatible only with Angular starting from 10.0.5 version. @ngneat/[email protected]
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.
npx @ngneat/until-destroy --base my/path
base
defaults to ./src/app
.
You can use --removeOnDestroy
flag for empty OnDestroy
methods removing.
npx @ngneat/until-destroy --removeOnDestroy
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. InvokeUntilDestroy()(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!