{"id":13808993,"url":"https://github.com/cloudnc/ngx-observable-lifecycle","last_synced_at":"2025-05-14T05:32:55.305Z","repository":{"id":38174519,"uuid":"265267149","full_name":"cloudnc/ngx-observable-lifecycle","owner":"cloudnc","description":"Library for observing the lifecycle of an (ivy compiled) angular component","archived":false,"fork":false,"pushed_at":"2024-05-01T21:17:59.000Z","size":1426,"stargazers_count":34,"open_issues_count":3,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-04T01:10:09.853Z","etag":null,"topics":[],"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/cloudnc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2020-05-19T14:16:56.000Z","updated_at":"2024-05-02T23:42:51.000Z","dependencies_parsed_at":"2024-05-01T22:45:26.776Z","dependency_job_id":"44a65d21-c269-4afa-80cc-1a8458aa2fc4","html_url":"https://github.com/cloudnc/ngx-observable-lifecycle","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudnc%2Fngx-observable-lifecycle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudnc%2Fngx-observable-lifecycle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudnc%2Fngx-observable-lifecycle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudnc%2Fngx-observable-lifecycle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudnc","download_url":"https://codeload.github.com/cloudnc/ngx-observable-lifecycle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225277948,"owners_count":17448789,"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":[],"created_at":"2024-08-04T01:01:57.186Z","updated_at":"2024-11-19T01:30:35.000Z","avatar_url":"https://github.com/cloudnc.png","language":"TypeScript","readme":"# NgxObservableLifecycle\n\n[![npm version](https://badge.fury.io/js/ngx-observable-lifecycle.svg)](https://www.npmjs.com/package/ngx-observable-lifecycle)\n[![Build Status](https://github.com/cloudnc/ngx-observable-lifecycle/workflows/CI/badge.svg)](https://github.com/cloudnc/ngx-observable-lifecycle/actions)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](https://commitizen.github.io/cz-cli/)\n[![codecov](https://codecov.io/gh/cloudnc/ngx-observable-lifecycle/branch/master/graph/badge.svg)](https://codecov.io/gh/cloudnc/ngx-observable-lifecycle)\n[![License](https://img.shields.io/github/license/cloudnc/ngx-observable-lifecycle)](https://raw.githubusercontent.com/cloudnc/ngx-observable-lifecycle/master/LICENSE)\n![npm peer dependency version](https://img.shields.io/npm/dependency-version/ngx-observable-lifecycle/peer/@angular/core)\n![npm peer dependency version](https://img.shields.io/npm/dependency-version/ngx-observable-lifecycle/peer/rxjs)\n\n\n## Features\n\n* Easily develop library components that rely on the Angular component/directive lifecycle\n* Avoid bugs caused by forgetting to ensure that Angular hook interfaces are implemented\n* Multiple different libraries can share the same underlying hook design\n* Hooks are explicitly defined - only the hooks you declare an interest in are observed\n\n## Purpose \u0026 Limitations\n\nThis library fills the need for a simple way for **library developers** to be able to observe the lifecycle of an Angular \ncomponent.\n\n## Example\n\nLet's say we're building a simple library function that automatically unsubscribes from observables that were manually \nsubscribed to within a component. We'll implement this as an RxJS operator that can be used as follows:\n\n```ts\n// ./src/app/lib-example/lib-example.component.ts#L11-L11\n\npublic timer$ = interval(500).pipe(automaticUnsubscribe(this));\n````\n\nIn order to create this operator, we can do the following:\n```ts\n// ./src/app/lib-example/lib-example.ts#L1-L8\n\nimport { getObservableLifecycle } from 'ngx-observable-lifecycle';\nimport { Observable } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nexport function automaticUnsubscribe\u003cT\u003e(component: any): (source: Observable\u003cT\u003e) =\u003e Observable\u003cT\u003e {\n  const { ngOnDestroy } = getObservableLifecycle(component);\n  return (source: Observable\u003cT\u003e): Observable\u003cT\u003e =\u003e source.pipe(takeUntil(ngOnDestroy));\n}\n``` \n\nWe call the`getObservableLifecycle` function exported by `ngx-observable-lifecycle` and destructure the `onDestroy` \nobservable. This observable is used with a `takeUntil` operator from `rxjs` which will automatically unsubscribe from \nthe observable that it is piped on.\n\nAnd that's it! Developers can now simply decorate their component, and use the rxjs operator on any of the places they \nsubscribe manually (i.e. calling `.subscribe()` ) to an observable:\n\n```ts\n// ./src/app/lib-example/lib-example.component.ts\n\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { interval } from 'rxjs';\nimport { automaticUnsubscribe } from './lib-example';\n\n@Component({\n  selector: 'app-lib-example',\n  templateUrl: './lib-example.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibExampleComponent {\n  public timer$ = interval(500).pipe(automaticUnsubscribe(this));\n\n  constructor() {\n    this.timer$.subscribe({\n      next: v =\u003e console.log(`timer$ value is ${v}`),\n      complete: () =\u003e console.log(`timer$ was completed!`),\n    });\n  }\n}\n\n```\n\n## Full API\n\nHere's an example component that hooks onto the full set of available hooks.\n\n```ts\n// ./src/app/child/child.component.ts\n\nimport { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';\nimport { getObservableLifecycle } from 'ngx-observable-lifecycle';\n\n@Component({\n  selector: 'app-child',\n  templateUrl: './child.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ChildComponent implements OnChanges {\n  @Input() input1: number | undefined | null;\n  @Input() input2: string | undefined | null;\n\n  constructor() {\n    const {\n      ngOnChanges,\n      ngOnInit,\n      ngDoCheck,\n      ngAfterContentInit,\n      ngAfterContentChecked,\n      ngAfterViewInit,\n      ngAfterViewChecked,\n      ngOnDestroy,\n    } =\n      // specifying the generics is only needed if you intend to\n      // use the `ngOnChanges` observable, this way you'll have\n      // typed input values instead of just a `SimpleChange`\n      getObservableLifecycle\u003cChildComponent, 'input1' | 'input2'\u003e(this);\n\n    ngOnInit.subscribe(() =\u003e console.count('onInit'));\n    ngDoCheck.subscribe(() =\u003e console.count('doCheck'));\n    ngAfterContentInit.subscribe(() =\u003e console.count('afterContentInit'));\n    ngAfterContentChecked.subscribe(() =\u003e console.count('afterContentChecked'));\n    ngAfterViewInit.subscribe(() =\u003e console.count('afterViewInit'));\n    ngAfterViewChecked.subscribe(() =\u003e console.count('afterViewChecked'));\n    ngOnDestroy.subscribe(() =\u003e console.count('onDestroy'));\n\n    ngOnChanges.subscribe(changes =\u003e {\n      console.count('onChanges');\n\n      // do note that we have a type safe object here for `changes`\n      // with the inputs from our component and their associated values typed accordingly\n\n      changes.input1?.currentValue; // `number | null | undefined`\n      changes.input1?.previousValue; // `number | null | undefined`\n\n      changes.input2?.currentValue; // `string | null | undefined`\n      changes.input2?.previousValue; // `string | null | undefined`\n    });\n  }\n\n  // when using the ngOnChanges hook, you have to define the hook in your class even if it's empty\n  // See https://stackoverflow.com/a/77930589/2398593 for more info\n  // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method\n  public ngOnChanges() {}\n}\n\n```\n\nNote with in the above example, all observables complete when the component is destroyed.\n","funding_links":[],"categories":["Underlying Technologies"],"sub_categories":["RxJS"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudnc%2Fngx-observable-lifecycle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudnc%2Fngx-observable-lifecycle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudnc%2Fngx-observable-lifecycle/lists"}