{"id":13627341,"url":"https://github.com/ngneat/until-destroy","last_synced_at":"2025-05-14T07:08:20.500Z","repository":{"id":38239587,"uuid":"111889553","full_name":"ngneat/until-destroy","owner":"ngneat","description":"🦊 RxJS operator that unsubscribe from observables on destroy","archived":false,"fork":false,"pushed_at":"2024-03-21T22:15:18.000Z","size":4129,"stargazers_count":1748,"open_issues_count":5,"forks_count":101,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-05-08T00:01:58.124Z","etag":null,"topics":["angular","angular2","decorators","rxjs","unsubscribe"],"latest_commit_sha":null,"homepage":"https://netbasal.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ngneat.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"ngneat"}},"created_at":"2017-11-24T07:34:23.000Z","updated_at":"2025-05-02T20:17:46.000Z","dependencies_parsed_at":"2023-02-09T12:45:28.215Z","dependency_job_id":"da5f32fd-ea87-4309-86a9-5f50185b38b2","html_url":"https://github.com/ngneat/until-destroy","commit_stats":{"total_commits":211,"total_committers":16,"mean_commits":13.1875,"dds":"0.48815165876777256","last_synced_commit":"22c7cd3a22ee25c72ef58f38e2071970995c114e"},"previous_names":["netanelbasal/ngx-take-until-destroy"],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Funtil-destroy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Funtil-destroy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Funtil-destroy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Funtil-destroy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngneat","download_url":"https://codeload.github.com/ngneat/until-destroy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253873010,"owners_count":21976989,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","decorators","rxjs","unsubscribe"],"created_at":"2024-08-01T22:00:33.074Z","updated_at":"2025-05-14T07:08:20.472Z","avatar_url":"https://github.com/ngneat.png","language":"TypeScript","readme":"# 🦁 Unsubscribe For Pros\n\n\u003e A neat way to unsubscribe from observables when the component destroyed\n\n[![@ngneat/until-destroy](https://github.com/ngneat/until-destroy/workflows/@ngneat/until-destroy/badge.svg)](https://github.com/ngneat/until-destroy/actions/workflows/until-destroy.yml)\n[![npm](https://img.shields.io/npm/dm/@ngneat/until-destroy?style=plastic)](https://www.npmjs.com/package/@ngneat/until-destroy)\n\n## Sponsoring ngneat\n\n[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.\n\n### Gold Sponsors\n\nElevate your support by becoming a Gold Sponsor and have your logo prominently featured on our README in the top 5 repositories.\n\n### Silver Sponsors\n\nBoost your backing by becoming a Gold Sponsor and enjoy the spotlight with your logo prominently showcased in the top 3 repositories on our README.\n\n### Bronze Sponsors\n\n\u003ca href=\"https://houseofangular.io\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://github.com/ngrx/platform/blob/main/projects/ngrx.io/src/assets/images/sponsors/house-of-angular.png\" width=\"50px\" height=\"50px\" alt=\"House of Angular\" /\u003e\n\u003c/a\u003e\n\nBecome a bronze sponsor and get your logo on our README on GitHub.\n\n## Compatibility with Angular Versions\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003e@ngneat/until-destroy\u003c/th\u003e\n      \u003cth\u003eAngular\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        8.x\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003e= 10.0.5 \u003c 13\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        9.x\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003e= 13\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Table of contents\n\n- [Use with Ivy](#use-with-ivy)\n  - [Use with Non-Singleton Services](#use-with-non-singleton-services)\n- [Use with View Engine (Pre Ivy)](#use-with-view-engine-pre-ivy)\n  - [Use with Any Class](#use-with-any-class)\n- [Migration from View Engine to Ivy](#migration-from-view-engine-to-ivy)\n- [Potential Pitfalls](#potential-pitfalls)\n- [Contributors](#contributors-✨)\n\n## Use with Ivy\n\n```bash\nnpm install @ngneat/until-destroy\n# Or if you use yarn\nyarn add @ngneat/until-destroy\n```\n\n```ts\nimport { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';\n\n@UntilDestroy()\n@Component({})\nexport class InboxComponent {\n  ngOnInit() {\n    interval(1000).pipe(untilDestroyed(this)).subscribe();\n  }\n}\n```\n\nYou can set the `checkProperties` option to `true` if you want to unsubscribe from subscriptions properties automatically:\n\n```ts\n@UntilDestroy({ checkProperties: true })\n@Component({})\nexport class HomeComponent {\n  // We'll dispose it on destroy\n  subscription = fromEvent(document, 'mousemove').subscribe();\n}\n```\n\nYou can set the `arrayName` property if you want to unsubscribe from each subscription in the specified array.\n\n```ts\n@UntilDestroy({ arrayName: 'subscriptions' })\n@Component({})\nexport class HomeComponent {\n  subscriptions = [\n    fromEvent(document, 'click').subscribe(),\n    fromEvent(document, 'mousemove').subscribe(),\n  ];\n\n  // You can still use the operator\n  ngOnInit() {\n    interval(1000).pipe(untilDestroyed(this));\n  }\n}\n```\n\nYou can set the `blackList` property if you **don't** want to unsubscribe from one or more subscriptions.\n\n```ts\n@UntilDestroy({ checkProperties: true, blackList: ['subscription1'] })\n@Component({})\nexport class HomeComponent {\n  // subscription1 will not be unsubscribed upon component destruction\n  subscription1: Subscription;\n  // subscription2 will be unsubscribed upon component destruction\n  subscription2: Subscription;\n\n  constructor() {\n    this.subscription1 = new Subject().subscribe();\n    this.subscription2 = new Subject().subscribe();\n  }\n}\n```\n\n### Use with Non-Singleton Services\n\n```ts\n@UntilDestroy()\n@Injectable()\nexport class InboxService {\n  constructor() {\n    interval(1000).pipe(untilDestroyed(this)).subscribe();\n  }\n}\n\n@Component({\n  providers: [InboxService],\n})\nexport class InboxComponent {\n  constructor(inboxService: InboxService) {}\n}\n```\n\nAll options, described above, are also applicable to providers.\n\n## Use with View Engine (Pre Ivy)\n\n```bash\nnpm install ngx-take-until-destroy\n# Or if you use yarn\nyarn add ngx-take-until-destroy\n```\n\n```ts\nimport { untilDestroyed } from 'ngx-take-until-destroy';\n\n@Component({})\nexport class InboxComponent implements OnDestroy {\n  ngOnInit() {\n    interval(1000)\n      .pipe(untilDestroyed(this))\n      .subscribe(val =\u003e console.log(val));\n  }\n\n  // This method must be present, even if empty.\n  ngOnDestroy() {\n    // To protect you, we'll throw an error if it doesn't exist.\n  }\n}\n```\n\n### Use with Any Class\n\n```ts\nimport { untilDestroyed } from 'ngx-take-until-destroy';\n\nexport class Widget {\n  constructor() {\n    interval(1000).pipe(untilDestroyed(this, 'destroy')).subscribe(console.log);\n  }\n\n  // The name needs to be the same as the second parameter\n  destroy() {}\n}\n```\n\n## Migration from View Engine to Ivy\n\nTo 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:\n\n```sh\nnpm i --save-dev @ngneat/until-destroy-migration\n# Or if you use yarn\nyarn add -D @ngneat/until-destroy-migration\n```\n\nThen run the following command:\n\n```shell script\nnpx @ngneat/until-destroy-migration --base my/path\n```\n\n`base` defaults to `./src/app`.\n\nYou can use the `--removeOnDestroy` flag for empty `OnDestroy` methods removing.\n\n```shell script\nnpx @ngneat/until-destroy-migration --removeOnDestroy\n```\n\nYou can remove the package once the migration is done.\n\n## Potential Pitfalls\n\n- The order of decorators is important, make sure to put `@UntilDestroy()` before the `@Component()` decorator.\n- 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.\n\n## ESLint Rules\n\n- [prefer-takeuntil](https://github.com/cartant/eslint-plugin-rxjs-angular/blob/main/docs/rules/prefer-takeuntil.md#options)\n- [no-unsafe-takeuntil](https://github.com/cartant/eslint-plugin-rxjs/blob/main/docs/rules/no-unsafe-takeuntil.md#options)\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.netbasal.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/6745730?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNetanel Basal\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ngneat/until-destroy/commits?author=NetanelBasal\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/ngneat/until-destroy/commits?author=NetanelBasal\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-NetanelBasal\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://medium.com/@overthesanity\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/7337691?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eArtur Androsovych\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ngneat/until-destroy/commits?author=arturovt\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#example-arturovt\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#ideas-arturovt\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#infra-arturovt\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/KrzysztofKarol\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/12470911?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKrzysztof Karol\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#content-KrzysztofKarol\" title=\"Content\"\u003e🖋\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/gund\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/3644678?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlex Malkevich\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ngneat/until-destroy/commits?author=gund\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/webdevius\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/2960769?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKhaled Shaaban\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ngneat/until-destroy/commits?author=webdevius\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/kmathy\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/15690980?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ekmathy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ngneat/until-destroy/commits?author=kmathy\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/FFKL\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/11336491?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDmitrii Korostelev\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ngneat/until-destroy/commits?author=FFKL\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","funding_links":["https://github.com/sponsors/ngneat"],"categories":["Underlying Technologies","Projects by main language","Libraries \u0026 Utilities"],"sub_categories":["RxJS","angular","Angular-Specific Utilities"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngneat%2Funtil-destroy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngneat%2Funtil-destroy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngneat%2Funtil-destroy/lists"}