{"id":17605583,"url":"https://github.com/Badisi/ngx-safe-subscribe","last_synced_at":"2025-03-09T03:31:35.551Z","repository":{"id":45385642,"uuid":"140828802","full_name":"Badisi/ngx-safe-subscribe","owner":"Badisi","description":"⛑️ Easy way to automatically unsubscribe from RxJS observables in Angular components","archived":false,"fork":false,"pushed_at":"2024-04-12T19:29:30.000Z","size":1243,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-20T18:37:55.627Z","etag":null,"topics":["angular","observable","ondestroy","rxjs","subscribe","unsubscribe"],"latest_commit_sha":null,"homepage":"","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/Badisi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-13T09:44:21.000Z","updated_at":"2024-05-16T23:47:55.844Z","dependencies_parsed_at":"2023-02-15T15:40:50.266Z","dependency_job_id":"bbd494d4-9b4f-4dc9-a83a-dee34d487a32","html_url":"https://github.com/Badisi/ngx-safe-subscribe","commit_stats":{"total_commits":112,"total_committers":4,"mean_commits":28.0,"dds":0.2678571428571429,"last_synced_commit":"7b42080e4abb67b7fe5243924e3d11c7ba3067c3"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Badisi%2Fngx-safe-subscribe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Badisi%2Fngx-safe-subscribe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Badisi%2Fngx-safe-subscribe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Badisi%2Fngx-safe-subscribe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Badisi","download_url":"https://codeload.github.com/Badisi/ngx-safe-subscribe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242640885,"owners_count":20162051,"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","observable","ondestroy","rxjs","subscribe","unsubscribe"],"created_at":"2024-10-22T15:01:17.078Z","updated_at":"2025-03-09T03:31:35.538Z","avatar_url":"https://github.com/Badisi.png","language":"TypeScript","funding_links":[],"categories":["Underlying Technologies"],"sub_categories":["RxJS"],"readme":"\u003ch1 align=\"center\"\u003e\n    @badisi/ngx-safe-subscribe\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ci\u003e⛑️ Automatically unsubscribe from RxJS observables in Angular components.\u003c/i\u003e\u003cbr/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@badisi/ngx-safe-subscribe\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/v/@badisi/ngx-safe-subscribe?color=blue\u0026logo=npm\" alt=\"npm version\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://npmcharts.com/compare/@badisi/ngx-safe-subscribe?minimal=true\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dw/@badisi/ngx-safe-subscribe.svg?color=7986CB\u0026logo=npm\" alt=\"npm donwloads\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/Badisi/ngx-safe-subscribe/blob/main/LICENSE\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/l/@badisi/ngx-safe-subscribe.svg?color=ff69b4\" alt=\"license\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/Badisi/ngx-safe-subscribe/actions/workflows/ci_tests.yml\"\u003e\n        \u003cimg src=\"https://github.com/Badisi/ngx-safe-subscribe/actions/workflows/ci_tests.yml/badge.svg\" alt=\"build status\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/badisi/ngx-safe-subscribe/blob/main/CONTRIBUTING.md#-submitting-a-pull-request-pr\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs welcome\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n:zap: *Angular \u003c= 13 version available [here](https://github.com/Badisi/ngx-safe-subscribe/releases/tag/2.2.9)*\n\n:zap: *RxJS 5.x version available [here](https://github.com/Badisi/ngx-safe-subscribe/tree/rxjs-5x)*\n\n\u003chr/\u003e\n\n## Installation\n\n```sh\nnpm install @badisi/ngx-safe-subscribe --save\n```\n\n```sh\nyarn add @badisi/ngx-safe-subscribe\n```\n\n## Usage\n\nSafeSubscribe is an augmentation method of Observable.\n\nCalling `safeSubscribe` instead of `subscribe` will automatically unsubscribe your observable at component destroy.\n\n#### Example with Angular components\n\n```ts\nimport { Component, OnInit } from '@angular/core';\nimport { SafeSubscribe } from '@badisi/ngx-safe-subscribe';\nimport { interval } from 'rxjs';\n\n@SafeSubscribe()\n@Component({\n   selector: 'app-component'\n})\nexport class AppComponent implements OnInit {\n   ngOnInit() {\n      interval(1000).safeSubscribe(this, () =\u003e {\n         console.log('This log will stop on component destroy.')\n      });\n   }\n}\n```\n\n#### Example with simple class objects\n\n```ts\nimport { SafeSubscribe } from '@badisi/ngx-safe-subscribe';\nimport { interval } from 'rxjs';\n\n@SafeSubscribe('destroy')\nexport class MyObject {\n   constructor() {\n      interval(1000).safeSubscribe(this, () =\u003e {\n         console.log('This log will stop on object destroy.')\n      });\n   }\n   destroy() {}\n}\n```\n\n## Api\n\n### @SafeSubscribe(destructorName)\n\n__Arguments__\n\n* `destructorName: string` *(default: \"ngOnDestroy\")* - The name of the method that will be called when the object is supposed to be destroyed.\n\n---\n\n### Observable.safeSubscribe(target, ...arguments): Subscription\n\n__Arguments__\n\n* `target: any` - A reference to the object that is holding the observable.\n* `observerOrNext?: Observer|Function` - Either an observer with methods to be called, or the first of three possible handlers, which is the handler for each value emitted from the subscribed Observable.\n* `error?: Function` - A handler for a terminal event resulting from an error. If no error handler is provided, the error will be thrown asynchronously as unhandled.\n* `complete?: Function` - A handler for a terminal event resulting from successful completion.\n\n__Return__\n\n* A `Subscription` reference to the registered handler.\n\n## Purpose\n\nTo quote a great [article](https://netbasal.com/when-to-unsubscribe-in-angular-d61c6b21bad3) from **Netanel Basal** :\n\n\u003e When you subscribe to an observable or event in JavaScript, you usually need to unsubscribe at a certain point to release memory in the system. Otherwise, you will have a memory leak.\n\nWhen subscribing to an observable in an Angular component, you almost always arrange to unsubscribe when the component is destroyed.\n\nBut it can quickly become a mess to deal with all those subscriptions and make sure they were properly released.\n\nThe idea behind SafeSubscribe is to abstract all the unsubscribe boilerplate and make it easier to use.\n\n### Rule of thumb\n\nThere are a few exceptional observables where you don't need to unsubscribe :\n\n* `Async pipe`\n* `@HostListener`\n* `HTTP requests`\n* `Finite observables (such as Observable.timer)`\n\nHowever, as stated in the official Angular documentation :\n\n\u003e Feel free to unsubscribe anyway. It is harmless and never a bad practice !\n\n## Contributing\n\n#### \u003e Want to Help ?\n\nWant to file a bug, contribute some code or improve documentation ? Excellent!\n\nBut please read up first on the guidelines for [contributing][contributing], and learn about submission process, coding rules and more.\n\n#### \u003e Code of Conduct\n\nPlease read and follow the [Code of Conduct][codeofconduct] and help me keep this project open and inclusive.\n\n\n\n\n[contributing]: https://github.com/badisi/latest-version/blob/main/CONTRIBUTING.md\n[codeofconduct]: https://github.com/badisi/latest-version/blob/main/CODE_OF_CONDUCT.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBadisi%2Fngx-safe-subscribe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBadisi%2Fngx-safe-subscribe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBadisi%2Fngx-safe-subscribe/lists"}