{"_id":"@canvasgfx/destroyable","_rev":"2-a3c776d3105fc1ca9e2b2e551fb0c6c1","name":"@canvasgfx/destroyable","dist-tags":{"latest":"2.0.0"},"versions":{"0.0.0":{"name":"@canvasgfx/destroyable","version":"0.0.0","scripts":{"ng":"ng","build":"ng build --prod && cp README.md dist/reactgular/destroyable","beta":"npm run lint && npm run build && cd dist/reactgular/destroyable && npm publish --tag beta","test":"ng test --watch=false --code-coverage=true","lint":"ng lint","e2e":"ng e2e"},"repository":{"type":"git","url":"git+https://github.com/canvasgfx/destroyable.git"},"dependencies":{"@angular/common":"~10.1.0","@angular/compiler":"~10.1.0","@angular/core":"~10.1.0","@angular/platform-browser":"~10.1.0","@angular/platform-browser-dynamic":"~10.1.0","@angular/router":"~10.1.0","rxjs":"~6.6.3","tslib":"^2.0.0","zone.js":"~0.10.2"},"devDependencies":{"@angular-devkit/build-angular":"~0.1001.0","@angular-devkit/build-ng-packagr":"~0.1001.0","@angular/cli":"~10.1.0","@angular/compiler-cli":"~10.1.0","@angular/language-service":"~10.1.0","@types/node":"^12.11.1","@types/jasmine":"~3.3.8","@types/jasminewd2":"~2.0.3","codelyzer":"^6.0.0","jasmine-core":"~3.5.0","jasmine-spec-reporter":"~5.0.0","karma":"~5.0.0","karma-chrome-launcher":"~3.1.0","karma-coverage-istanbul-reporter":"~3.0.2","karma-jasmine":"~4.0.0","karma-jasmine-html-reporter":"^1.5.0","ng-packagr":"^10.1.0","protractor":"~7.0.0","ts-node":"~7.0.0","tslint":"~6.1.0","typescript":"~4.0.2"},"gitHead":"5fa5beb6c285258def4ccbb0ae15f4a4ae05d872","description":"[![Build Status](https://travis-ci.org/reactgular/destroyable.svg?branch=develop)](https://travis-ci.org/reactgular/destroyable)\r [![Coverage Status](https://coveralls.io/repos/github/reactgular/destroyable/badge.svg?branch=develop)](https://coveralls.io/","bugs":{"url":"https://github.com/canvasgfx/destroyable/issues"},"homepage":"https://github.com/canvasgfx/destroyable#readme","_id":"@canvasgfx/destroyable@0.0.0","_nodeVersion":"16.13.0","_npmVersion":"9.4.0","dist":{"integrity":"sha512-EkPZq5OjE+22zWiicA+YeIIgA1j3YNrpmubg6JukDOZswEwrsEZEBXTvti3GCHJd97UumQnqAH6MvR/FwquJBQ==","shasum":"90fd4679459ce1f8e11b250af9b2a03540611347","tarball":"https://registry.npmjs.org/@canvasgfx/destroyable/-/destroyable-0.0.0.tgz","fileCount":24,"unpackedSize":23447,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwYbaxrmsXUDZ7fyqPxarNV7Ikfi0wOytznZTC5wDf+AIgXvyTjncuF6xl1jMmFyoSp/xpJ9dRt2kQ4Vny5nU0hmw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2soUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOCA//ddWZeAnL3C0s2LHxH1FD77IRIxYOr3rldBImfmnXQ6B4Zq0T\r\nt3Tr9ikJPBzQGIpAEOkeFDgzMTfDwLtLzqkRb5lh9FfvCNM5FDAMqElYnzpD\r\nSaBEnCEDUQlgDeN7geL+r79ECzyWIqOtuRKdlwWrjN/YHVRuGEO9gkp4Imdd\r\nlTQaaco51qK38HeIb1Ox8+vdEJ8QrToyIT3kb6nWRe9RHR/znY2JvsCKUQ4h\r\nsDRuu5PA03vVXHEmz0EMRfAaguwvUXlGam59uPvpP1ML35TroXXlCjr3cbD5\r\n6IZovaL3jMF12EO08ol6NhbnrFtP3Tig1X+x3G+ZkV9+s4ATvwANTKjinzcP\r\nfW9yskcFDPpts3e3LPNnYedgt0XaZl+Ez5HFVaN6K9djrgo/nvlGXeDMqaQc\r\nQfcuKzuE/G6jWRqO4boYQ69RrsJjXfdtAZA7tpk08JYrCYmD7lpr2vaQL+g4\r\n7VjkqeKmHGnx1JNMmMDGI3jtPJUQvzbsLAhSzax2lAXNXnXgoIl+MY+gfn2H\r\nqsSkrldaq92mE9R22E2rzt73LsDR+lZshqnD543hUH9svS2gtuG0l+FfGaBX\r\n1QWg/Zj53PvVgzWNcqP8l1koIuLbTWLtX1F2acSqrU5UsnpaW5Nw6vVm/RSB\r\nBPGV+Z9XMViLU0tt+foArr4WU9GNiTC0Cpw=\r\n=5FiE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jbrousseau","email":"jeanbaptiste.rousseau@gmail.com"},"directories":{},"maintainers":[{"name":"jbrousseau","email":"jeanbaptiste.rousseau@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/destroyable_0.0.0_1675282964287_0.5378132397206974"},"_hasShrinkwrap":false},"2.0.0":{"name":"@canvasgfx/destroyable","version":"2.0.0","description":"Destroyable is an abstract class that implements the OnDestroy life-cycle hook in Angular","author":{"name":"reactgular.com"},"homepage":"https://github.com/canvasgfx/destroyable","license":"MIT","keywords":["angular","angular-library","life-cycle-hooks","angular-components","components","rxjs","destroy","OnDestroy"],"repository":{"type":"git","url":"git+https://github.com/canvasgfx/destroyable.git"},"bugs":{"url":"https://github.com/reactgular/destroyable/issues"},"dependencies":{"tslib":"^2.0.0"},"peerDependencies":{"@angular/common":"^10.0.0","@angular/core":"^10.0.0"},"main":"bundles/canvasgfx-destroyable.umd.js","module":"fesm2015/canvasgfx-destroyable.js","es2015":"fesm2015/canvasgfx-destroyable.js","esm2015":"esm2015/canvasgfx-destroyable.js","fesm2015":"fesm2015/canvasgfx-destroyable.js","typings":"canvasgfx-destroyable.d.ts","metadata":"canvasgfx-destroyable.metadata.json","sideEffects":false,"gitHead":"d8e3c3f00b6c61d54bfbdbe87c8900235d1edd0c","_id":"@canvasgfx/destroyable@2.0.0","_nodeVersion":"16.13.0","_npmVersion":"9.4.0","dist":{"integrity":"sha512-PGNyuGT3O+CRhgGK9ee2Bz1zjLOfAn8TVA+oDr0eZ/C6UQ8FFwaEP48cCC+8mutUZNGMVPEDXOvqgEs/7DjTpQ==","shasum":"8372888309b7d632a13e7bcb000eab8012ccb83e","tarball":"https://registry.npmjs.org/@canvasgfx/destroyable/-/destroyable-2.0.0.tgz","fileCount":17,"unpackedSize":83020,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE43lnu617k/N6fuZsn6fvv2vhfwNY3FzsU4d4PeumL8AiEAuyqcVd71V2/Am6qgYcB2TFGGWq3dwauIbgAyISS1R4o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2tKcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoc/w/9FlzL9JskaRMEbzyftU5NzBhb5Bho3z24SKyIJFE1+ymIYgKM\r\nAxDxPIEqf/mCyuIBrofdSZi7iW5jcLSuLPtnQpuB5bRY7NBzQ4j/4mbqnWN5\r\nzcYXKy7NmNjFZLGsUQ50USjph0n8oiwOGgJr5gKVjf/DXwru7C4DPE5KmmLz\r\nmEhr8ut5WMdssnpF7JchASfJhCof4imla78JizU7L9MpiPJrCGxcEXm2h0Ge\r\n7IFvUltl0cXSDVDIJY4nx3tgXnUaW+UW/TTSYi5sGeR4g16aCGUDvfSbO2J0\r\n2ko4vdRYLUgucJJB1e4zcbZrC/jBrrd3Pm1Kvbn9hYBjSws0WBqMSGVsWk6D\r\nhzl+nltfWWqPhRkLeQL0QUqTI6E/LkKgah1dC39EnHvojBGJaXKsfcxHguDU\r\nXCWimW7rc737U8T+X2PV6OvVGfIKqGjccKevT1ab64Es7bxohdwnBR588kAR\r\nzdjiHGr6WhDAXT/iHz02Ao1An/FZWtGAlYb1NjbVbg2HM86fr9FFMA3Gi1Gb\r\nXFhTIq8VkLWN8oBcDh04eHmJAsVNR8Q38NALchaiF7ucLJzb2zd1EXKEWByq\r\nB4+zR+0HdzcrTV+3ZThkUnoVX72q51EjfOQFO71Pi6EPXhWUsPziTVAyT1rN\r\n8IZ+GqjQWU3ZuKofcfS8RxkvY0xDKK73AOA=\r\n=q4C0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jbrousseau","email":"jeanbaptiste.rousseau@gmail.com"},"directories":{},"maintainers":[{"name":"jbrousseau","email":"jeanbaptiste.rousseau@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/destroyable_2.0.0_1675285148479_0.8280127660524361"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-01T20:22:44.211Z","0.0.0":"2023-02-01T20:22:44.502Z","modified":"2023-02-02T14:36:13.015Z","2.0.0":"2023-02-01T20:59:08.656Z"},"maintainers":[{"email":"alex.hughes000@gmail.com","name":"g0ddish"},{"email":"jeanbaptiste.rousseau@gmail.com","name":"jbrousseau"}],"description":"Destroyable is an abstract class that implements the OnDestroy life-cycle hook in Angular","homepage":"https://github.com/canvasgfx/destroyable","repository":{"type":"git","url":"git+https://github.com/canvasgfx/destroyable.git"},"bugs":{"url":"https://github.com/reactgular/destroyable/issues"},"readme":"[![Build Status](https://travis-ci.org/reactgular/destroyable.svg?branch=develop)](https://travis-ci.org/reactgular/destroyable)\r\n[![Coverage Status](https://coveralls.io/repos/github/reactgular/destroyable/badge.svg?branch=develop)](https://coveralls.io/github/reactgular/destroyable?branch=develop)\r\n[![npm version](https://badge.fury.io/js/%40reactgular%2Fdestroyable.svg)](https://badge.fury.io/js/%40reactgular%2Fdestroyable)\r\n\r\n## What is Destroyable?\r\n\r\nDestroyable is an abstract class which implements the `OnDestroy` life-cycle hook in Angular, and when the hook gets triggered a protected observable \r\nnamed `_destroyed$` will emit once and then complete.\r\n\r\nYou can then use `takeUntil(this._destroyed$)` when subscribing to observables from inside your component, and the subscription will automatically\r\nend when the component has been destroyed.\r\n\r\nThe usage of `takeUntil(this._destroyed$)` is a popular best practice for Angular projects. You can find a lot of tutorials online discussing the practice.\r\n\r\n- [The Best Way To Unsubscribe RxJS Observables In The Angular Applications](https://blog.angularindepth.com/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0)\r\n- [The easiest way to unsubscribe from Observables in Angular](https://medium.com/thecodecampus-knowledge/the-easiest-way-to-unsubscribe-from-observables-in-angular-5abde80a5ae3)\r\n\r\n## Changelog\r\n\r\nFor details on recent changes, releases and Angular version support, please see the change log.\r\n\r\n[Learn about the latest improvements](https://github.com/reactgular/destroyable/blob/develop/CHANGELOG.md).\r\n\r\n## Installation\r\n\r\nTo get started, install the package from npm.\r\n\r\n```bash\r\nnpm install @reactgular/destroyable\r\n```\r\n\r\n> To install Angular 8 or 9 versions `npm install @reactgular/destroyable@1.0.1`\r\n\r\n### Usage\r\n\r\nAllows you to easily add `takeUntil(this._destroyed$)` to components, modules and services in an Angular application.\r\n\r\nThe following example component prints ascending numbers to the console for as long as the component lives.\r\n\r\n```\r\nimport {Component, OnInit} from '@angular/core';\r\nimport {interval} from 'rxjs';\r\nimport {takeUntil} from 'rxjs/operators';\r\nimport {Destroyable} from '@reactgular/destroyable';\r\n\r\n@Component({\r\n    selector: 'example'\r\n    template: ''\r\n})\r\nexport class ExampleComponent extends Destroyable implements OnInit {\r\n  public ngOnInit(): void {\r\n    interval(1000).pipe(\r\n      takeUntil(this._destroyed$)\r\n    ).subscribe(value => console.log(value));\r\n  }\r\n}\r\n```\r\n\r\nWhen implementing `OnDestroy` it's very important to call `super.ngOnDestroy()` for the base class, but it's not necessary to implement\r\nthe interface because `Destroyable` already implements it.\r\n\r\n```\r\nexport class ExampleComponent extends Destroyable implements OnDestroy {\r\n    public constructor() {\r\n        super();\r\n    }\r\n\r\n    public ngOnDestroy() {\r\n        super.ngOnDestroy();\r\n    }\r\n}\r\n```\r\n\r\n## Mixin\r\n\r\nDestroyable supports mixins to use a different base class with your Angular components. The only limitation is that TypeScript doesn't\r\ncurrently support `abstract` classes for use with mixins. \r\n\r\n```\r\nimport {Component, OnInit} from '@angular/core';\r\nimport {interval} from 'rxjs';\r\nimport {takeUntil} from 'rxjs/operators';\r\nimport {mixinDestroyable} from '@reactgular/destroyable';\r\n\r\n@Directive()\r\nclass BaseDirective {\r\n}\r\n\r\n@Component({\r\n    selector: 'example'\r\n    template: ''\r\n})\r\nexport class ExampleComponent extends mixinDestroyable(BaseDirective) implements OnInit {\r\n  public ngOnInit(): void {\r\n    interval(1000).pipe(\r\n      takeUntil(this._destroyed$)\r\n    ).subscribe(value => console.log(value));\r\n  }\r\n}\r\n```\r\n","readmeFilename":"README.md","keywords":["angular","angular-library","life-cycle-hooks","angular-components","components","rxjs","destroy","OnDestroy"],"author":{"name":"reactgular.com"},"license":"MIT"}