Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ngneat/until-destroy
🦊 RxJS operator that unsubscribe from observables on destroy
https://github.com/ngneat/until-destroy
angular angular2 decorators rxjs unsubscribe
Last synced: about 2 months ago
JSON representation
🦊 RxJS operator that unsubscribe from observables on destroy
- Host: GitHub
- URL: https://github.com/ngneat/until-destroy
- Owner: ngneat
- License: mit
- Created: 2017-11-24T07:34:23.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-21T22:15:18.000Z (6 months ago)
- Last Synced: 2024-05-01T11:39:43.355Z (5 months ago)
- Topics: angular, angular2, decorators, rxjs, unsubscribe
- Language: TypeScript
- Homepage: https://netbasal.com/
- Size: 3.94 MB
- Stars: 1,722
- Watchers: 29
- Forks: 98
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-opensource-israel - @ngneat/until-destroy - 🦊 RxJS operator that unsubscribe from observables on destroy    (Projects by main language / angular)
- awesome-angular - until-destroy - RxJS operator that unsubscribe from observables on destroy. (Table of contents / Third Party Components)
README
# 🦁 Unsubscribe For Pros
> A neat way to unsubscribe from observables when the component destroyed
[](https://github.com/ngneat/until-destroy/actions/workflows/until-destroy.yml)
[](https://www.npmjs.com/package/@ngneat/until-destroy)
## Sponsoring ngneat
[Sponsorships](https://github.com/sponsors/ngneat) aid in the continued development and maintenance of ngneat libraries. Consider asking your company to sponsor ngneat as its core to their business and application development.
### Gold Sponsors
Elevate your support by becoming a Gold Sponsor and have your logo prominently featured on our README in the top 5 repositories.
### Silver Sponsors
Boost your backing by becoming a Gold Sponsor and enjoy the spotlight with your logo prominently showcased in the top 3 repositories on our README.
### Bronze Sponsors
Become a bronze sponsor and get your logo on our README on GitHub.
## Compatibility with Angular Versions
@ngneat/until-destroy
Angular
8.x
>= 10.0.5 < 13
9.x
>= 13
## Table of contents
- [Use with Ivy](#use-with-ivy)
- [Use with Non-Singleton Services](#use-with-non-singleton-services)
- [Use with View Engine (Pre Ivy)](#use-with-view-engine-pre-ivy)
- [Use with Any Class](#use-with-any-class)
- [Migration from View Engine to Ivy](#migration-from-view-engine-to-ivy)
- [Potential Pitfalls](#potential-pitfalls)
- [Contributors](#contributors-✨)
## Use with Ivy
```bash
npm install @ngneat/until-destroy
# Or if you use yarn
yarn add @ngneat/until-destroy
```
```ts
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:
```ts
@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.
```ts
@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.
```ts
@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
```ts
@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)
```bash
npm install ngx-take-until-destroy
# Or if you use yarn
yarn add ngx-take-until-destroy
```
```ts
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
```ts
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:
```sh
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:
```shell script
npx @ngneat/until-destroy-migration --base my/path
```
`base` defaults to `./src/app`.
You can use the `--removeOnDestroy` flag for empty `OnDestroy` methods removing.
```shell script
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`](https://angular.io/api/core/testing/TestBed#overrideComponent) in unit tests remember that it overrides metadata and component definition. Invoke `UntilDestroy()(YourComponent);` to reapply the decorator. See [here](https://github.com/ngneat/until-destroy/issues/91#issuecomment-626470446) for an example.
## ESLint Rules
- [prefer-takeuntil](https://github.com/cartant/eslint-plugin-rxjs-angular/blob/main/docs/rules/prefer-takeuntil.md#options)
- [no-unsafe-takeuntil](https://github.com/cartant/eslint-plugin-rxjs/blob/main/docs/rules/no-unsafe-takeuntil.md#options)
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Netanel Basal
💻 📖 🤔
Artur Androsovych
💻 💡 🤔 🚇
Krzysztof Karol
🖋
Alex Malkevich
💻
Khaled Shaaban
💻
kmathy
💻
Dmitrii Korostelev
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!