{"id":13808424,"url":"https://github.com/Jaspero/ng-helpers","last_synced_at":"2025-05-14T02:31:52.297Z","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":"2024-03-28T18:56:24.000Z","size":6709,"stargazers_count":6,"open_issues_count":8,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-29T19:46:17.760Z","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},"funding":{"github":["Jaspero"]}},"created_at":"2018-06-16T13:07:14.000Z","updated_at":"2024-06-19T13:35:32.228Z","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":32,"template":false,"template_full_name":null,"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","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273239,"owners_count":17448073,"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","pipes","utilities"],"created_at":"2024-08-04T01:01:42.447Z","updated_at":"2024-11-19T00:30:45.764Z","avatar_url":"https://github.com/Jaspero.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Jaspero"],"categories":["Third Party Components"],"sub_categories":["DOM"],"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"}