{"id":21937729,"url":"https://github.com/jaspero/ng-helpers","last_synced_at":"2025-09-08T02:44:44.712Z","repository":{"id":34024143,"uuid":"137581439","full_name":"Jaspero/ng-helpers","owner":"Jaspero","description":"A collection of useful components, directives and pipes for Angular.","archived":false,"fork":false,"pushed_at":"2025-03-12T09:07:18.000Z","size":7504,"stargazers_count":6,"open_issues_count":8,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-03T21:35:31.924Z","etag":null,"topics":["angular","pipes","utilities"],"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/Jaspero.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":["Jaspero"]}},"created_at":"2018-06-16T13:07:14.000Z","updated_at":"2025-03-12T09:07:20.000Z","dependencies_parsed_at":"2024-06-19T13:35:11.634Z","dependency_job_id":"0906c267-e90d-410c-b350-87bf04dc829f","html_url":"https://github.com/Jaspero/ng-helpers","commit_stats":{"total_commits":145,"total_committers":7,"mean_commits":"20.714285714285715","dds":0.6275862068965516,"last_synced_commit":"35dd2fa751338296f1dd980634f7013d4162779f"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"purl":"pkg:github/Jaspero/ng-helpers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jaspero%2Fng-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jaspero%2Fng-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jaspero%2Fng-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jaspero%2Fng-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jaspero","download_url":"https://codeload.github.com/Jaspero/ng-helpers/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jaspero%2Fng-helpers/sbom","scorecard":{"id":71254,"data":{"date":"2025-08-11","repo":{"name":"github.com/Jaspero/ng-helpers","commit":"3bf8a4ef005330df756dafba3578cf820cc16018"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.5,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/24 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/deploy.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/Jaspero/ng-helpers/deploy.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/Jaspero/ng-helpers/deploy.yml/master?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/deploy.yml:19","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 6 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"51 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-c75v-2vq8-878f","Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-q9mw-68c2-j6m5","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-c76h-2ccp-4975","Warn: Project is vulnerable to: GHSA-cxrh-j4jr-qwg3","Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3","Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx","Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6","Warn: Project is vulnerable to: GHSA-x574-m823-4x7w","Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8","Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-15T03:51:11.605Z","repository_id":34024143,"created_at":"2025-08-15T03:51:11.605Z","updated_at":"2025-08-15T03:51:11.605Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274125513,"owners_count":25226490,"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","status":"online","status_checked_at":"2025-09-08T02:00:09.813Z","response_time":121,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","pipes","utilities"],"created_at":"2024-11-29T01:25:15.901Z","updated_at":"2025-09-08T02:44:44.692Z","avatar_url":"https://github.com/Jaspero.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Jaspero"],"categories":[],"sub_categories":[],"readme":"[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![CircleCI](https://circleci.com/gh/Jaspero/ng-helpers.svg?style=svg)](https://circleci.com/gh/Jaspero/ng-helpers)\n[![NPM Version](https://img.shields.io/npm/v/@jaspero/ng-helpers.svg)](https://www.npmjs.com/package/@jaspero/ng-helpers)\n\n# @jaspero/ng-helpers\n\nA collection of useful components, directives and pipes for Angular applications.\n\nEvery item (component, directive and pipe) is published in a separate module, making it\neasy to just import modules your application will use and not increase bundle size\nunnecessarily.\n\n- [Components](#components)\n- [Directives](#directives)\n  - [ClickOutsideDirective](#clickoutsidedirective)\n  - [FormTouchOnHoverDirective](#formtouchonhoverdirective)\n  - [StopPropagationDirective](#stoppropagationdirective)\n  - [DebounceChangeDirective](#debouncechangedirective)\n  - [TrackByField](#trackbyfield)\n  - [LoadClickDirective](#loadclickdirective)\n- [Pipes](#pipes)\n  - [EnumPipe](#enumpipe)\n  - [SanitizePipe](#sanitizepipe)\n  - [TimePassedPipe](#timepassedpipe)\n  - [EnumKeyFormatPipe](#enumkeyformatpipe)\n- [Helper Classes](#helper-classes)\n  - [OnChange](#onchange)\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install --save @jaspero/ng-helpers\n```\n\nThen import any Module you need. For example if you need the `ClickOutsideDirective` import the `ClickOutsideModule`.\n\n## Components\n\n## Directives\n\n### ClickOutsideDirective\n\nThis directive listens for emitted events on the window object and emits\nif the event doesn't contain the target element.\n\n#### Example\n\n```angular2html\n\u003cdiv (jpClickOutside)=\"doSomething()\"\u003e\u003c/div\u003e\n```\n\n#### Use Cases\n\n- Closing modals, dropdowns, mobile navigations when clicked outside.\n- Toggling off one item when another is clicked (accordion)\n\n#### Outputs\n\n| name           | description                                             |\n| -------------- | ------------------------------------------------------- |\n| jpClickOutside | Emits when current element isn't contained in the event |\n\n#### Inputs\n\n| name                  | type    | default | description                           |\n| --------------------- | ------- | ------- | ------------------------------------- |\n| clickOutsideEventType | string  | 'click' | event to listen for                   |\n| clickOutsideBlock     | boolean | false   | if true `jpClickOutside` doesn't emit |\n\n### FormTouchOnHoverDirective\n\nThis directive requires a `FormGroup` or `FormArray` then on mouseenter loops over all controls and marks them touched.\n\n#### Example\n\n```angular2html\n\u003cform [formGroup]=\"someForm\"\u003e\n  \u003cinput type=\"text\" formControlName=\"someControl\"\u003e\n\n  \u003c!--We wrapp the button so that we get mouseover event's even when the submit is disabled--\u003e\n  \u003cdiv jpFormTouchOnHover\u003e\n    \u003cbutton type=\"submit\" [disabled]=\"someForm.invalid\"\u003eSave\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\n#### Use Cases\n\n- This directive is particularly useful when you want to provide information on why the submit button is disabled.\n  Since hovering over it will trigger any validation on the form.\n\n#### Outputs\n\n| name               | description                                                      |\n| ------------------ | ---------------------------------------------------------------- |\n| jpFormTouchOnHover | Emits when controls finish looping and every element was touched |\n\n#### Inputs\n\n| name          | type                   | default | description                  |\n| ------------- | ---------------------- | ------- | ---------------------------- |\n| jpFormTouched | FormGroup or FormArray | null    | set of controls to loop over |\n\n### StopPropagationDirective\n\nListens for the emitted event on the target element and simply\nforwards it along and calls `event.stopPropagation()`.\n\n#### Example\n\n```angular2html\n  \u003cbutton (jpStopPropagation)=\"doSomething()\"\u003eClick\u003c/button\u003e\n```\n\n#### Use Cases\n\n- When ever you need to stopPropagation on an event, you can use this directive rather then passing the event along\n\n#### Outputs\n\n| name              | description                                            |\n| ----------------- | ------------------------------------------------------ |\n| jpStopPropagation | Emits the original event after calling stopPropagation |\n\n#### Inputs\n\n| name                     | type    | default | description                                      |\n| ------------------------ | ------- | ------- | ------------------------------------------------ |\n| preventDefault           | boolean | false   | should `event.preventDefault()` also get called. |\n| stopPropagationEventType | string  | 'click' | what event to listen for                         |\n| condition | boolean or (event) =\u003e boolean | undefined | a condition to check before calling `event.stopPropagation()` |\n\n### DebounceChangeDirective\n\nListens for the emitted event on the target element and simply\nforwards it along after `debounceTime`.\n\n#### Example\n\n```angular2html\n  \u003cinput type=\"text\" (jpDebounceChange)=\"doSomething()\" /\u003e\n```\n\n#### Use Cases\n\n- When ever you need to emit events with a delay\n\n#### Outputs\n\n| name             | description                             |\n| ---------------- | --------------------------------------- |\n| jpDebounceChange | emits original event after debounceTime |\n\n#### Inputs\n\n| name                    | type    | default | description                              |\n| ----------------------- | ------- | ------- | ---------------------------------------- |\n| debounceTime            | number  | 500     | value to pass to the `debounceTime` pipe |\n| debounceChangeEventType | string  | 'keyup' | what event to listen for                 |\n| emitOnlyOnChange        | boolean | false   | only emit event if the value changes     |\n\n### TrackByFieldDirective\n\n### Example\n\n```angular2html\n\u003cdiv *ngFor=\"let item of items; jpTrackByField:'test'\"\u003e\u003c/div\u003e\n```\n\n```ts\n@NgModule({\n  imports: [TrackByFieldModule.defaultKey()]\n})\nexport class Module {}\n```\n\n\n### LoadClickDirective\n\nListens for the emitted click event on the target element and add loading class.\n\n#### Example\n\n```angular2html\n  \u003cbutton [jpLoadClick]=\"save()\"\u003eSubmit\u003c/button\u003e\n```\n\n#### Use Cases\n\n- For preventing double click on the submit button.\n\n#### Inputs\n\n| name                     | type            | default   | description                              |\n| ------------------------ | --------------- | --------- | ---------------------------------------- |\n| jpLoadClick              | Observable\u003cany\u003e | null      |  \n| loadClickClass           | string          | 'loading' |  \n| loadClickStopPropagation | boolean         | false     | Should `stopPropagation` be called. \n| loadClickEventType       | string          | 'click'   | \n| loadClickPreventDefault  | boolean         | false     | Should `preventDefault` be called. \n| disableAttribute         | boolean         | true      | Should the disabled attribute be attached to the element. \n\n## Pipes\n\n### EnumPipe\n\nA very simple pipe that returns an array of `{key: number, value: string}` objects from an enum.\n\n#### Example\n\n```angular2html\n  \u003cselect\u003e\n    \u003coption *ngFor=\"let item of someEnum | jpEnum\" [value]=\"item.key\"\u003e\n      {{item.value}}\n    \u003c/option\u003e\n  \u003c/select\u003e\n```\n\n#### Use Cases\n\n- It's most commonly used to easily iterate over an enum in a select\n\n#### Input Value\n\n| value | type | description                                                                                      |\n| ----- | ---- | ------------------------------------------------------------------------------------------------ |\n| value | enum | Supports any enum value. Provide it in typescript `someEnum = SomeEnum` to iterate over in html. |\n\n#### Parameters\n\nNo parameters for `EnumPipe`\n\n### SanitizePipe\n\nSimplifies using of `DomSanitizer`. The pipe accepts any value and then tries to sanitize it to the desired format.\n\n#### Example\n\n```angular2html\n\u003cdiv [innerHtml]=\"unsanitizedHtml | jpSanitize:'html'\"\u003e\u003c/div\u003e\n```\n\n#### Use Cases\n\n- Rendering raw html, styles...\n\n#### Input Value\n\n| value | type   | description                                                       |\n| ----- | ------ | ----------------------------------------------------------------- |\n| value | string | Accepts any unsanitized string and runs it through `DomSanitizer` |\n\n#### Parameters\n\n| param | type                                          | default | description                                                                |\n| ----- | --------------------------------------------- | ------- | -------------------------------------------------------------------------- |\n| type  | html or style or script or url or resourceUrl | html    | Type of entry value. This determines what `DomSanitizer` method get's used |\n\n### TimePassedPipe\n\nThis pipe takes a date as input and returns the elapsed time since that date as a number in the desired format.\n\n#### Example\n\n```angular2html\n\u003cdiv\u003e\n {{someDate | jpTimePassed:null:timePassedType.Minute}} minutes ago\n\u003c/div\u003e\n```\n\n#### Use Cases\n\n- Displaying elapsed time\n\n#### Input Value\n\n| value | type | description |\n| ----- | ---- | ----------- |\n| value | Date | any date    |\n\n#### Parameters\n\n| param   | type           | default               | description                                                               |\n| ------- | -------------- | --------------------- | ------------------------------------------------------------------------- |\n| dateTwo | Date           | current date          | This is the ending date in the interval. It defaults to the current date. |\n| type    | TimePassedType | TimePassedType.Minute | In what time format should the elapsed time be returned in.               |\n\n### EnumKeyFormatPipe\n\n#### Example\n\n```angular2html\n\u003cdiv *ngFor=\"let item of someObject | jpArrayFromObject\"\u003e\n  \u003cspan\u003eKEY: {{item.key}}\u003c/span\u003e\n  \u003cspan\u003eVALUE: {{item.value}}\u003c/span\u003e\n\u003c/div\u003e\n```\n\n#### Use Cases\n\n- This pipe is useful when ever you need to iterate an object in your template\n\n#### Input Value\n\n| value | type   | description |\n| ----- | ------ | ----------- |\n| value | object | any object  |\n\n#### Parameters\n\nNo parameters for `ArrayFromObjectPipe`\n\n## Decorators\n\n### OnChange\n\nA decorator for change detection on properties\n\n#### Example\n```typescript\nexport class AppComponent {\n  @OnChange\u003cstring\u003e((value, simpleChange) =\u003e {\n      console.log(`Title is changed to: ${value}`);\n  })\n  @Input()\n  title: string;\n}\n```\n\n### JpFunction\nDecorator for methods used by LoadClickDirective.\n\u003cbr\u003e Wraps them in function and expects return of type Observable.\n\n#### Parameters\n\n| value | type   | description |\n| ----- | ------ | ----------- |\n| take  | number | When JpFunction is called programmatically by default append take(1) to Observable. Pass 0 to skip take operator.   |\n\n#### Example\n```typescript\n@JpFunction()\nwaitFor(milliseconds: number = 1000) {\n  return of(true).pipe(\n    delay(milliseconds)\n  );\n}\n```\n\n```typescript\n@JpFunction({take: 2})\ncount() {\n  return interval(10).pipe(\n    tap((index) =\u003e {\n      console.log(index);\n    })\n  );\n}\n\nngOnInit() {\n  // Triggers console.log for 0 and 1\n  this.count();\n}\n```\n\n## License\n\nMIT © [Jaspero Ltd](mailto:info@jaspero.co)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaspero%2Fng-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaspero%2Fng-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaspero%2Fng-helpers/lists"}