{"id":19075618,"url":"https://github.com/taiga-family/ng-event-plugins","last_synced_at":"2025-04-12T19:47:24.931Z","repository":{"id":187427115,"uuid":"676868678","full_name":"taiga-family/ng-event-plugins","owner":"taiga-family","description":"is a tiny library for optimizing change detection cycles for performance sensitive events ","archived":false,"fork":false,"pushed_at":"2025-04-08T14:37:23.000Z","size":98222,"stargazers_count":86,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-08T15:38:03.717Z","etag":null,"topics":["angular"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/taiga-family.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-10T07:42:35.000Z","updated_at":"2025-04-08T14:37:26.000Z","dependencies_parsed_at":"2023-12-30T16:23:00.216Z","dependency_job_id":"7fb30a35-84f1-4c06-8575-49790c2ce634","html_url":"https://github.com/taiga-family/ng-event-plugins","commit_stats":{"total_commits":765,"total_committers":11,"mean_commits":69.54545454545455,"dds":0.1986928104575163,"last_synced_commit":"52f9a2832e6ab7f21e383895ed83007014d84a48"},"previous_names":["taiga-family/ng-event-plugins"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiga-family%2Fng-event-plugins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiga-family%2Fng-event-plugins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiga-family%2Fng-event-plugins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiga-family%2Fng-event-plugins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taiga-family","download_url":"https://codeload.github.com/taiga-family/ng-event-plugins/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625497,"owners_count":21135513,"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"],"created_at":"2024-11-09T01:55:18.691Z","updated_at":"2025-04-12T19:47:24.896Z","avatar_url":"https://github.com/taiga-family.png","language":"TypeScript","funding_links":[],"categories":["Development Utilities"],"sub_categories":["Performance"],"readme":"# Angular Event Plugins\n\n[![npm version](https://img.shields.io/npm/v/@taiga-ui/event-plugins.svg)](https://npmjs.com/package/@taiga-ui/event-plugins)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@taiga-ui/event-plugins)](https://bundlephobia.com/result?p=@taiga-ui/event-plugins)\n[![Coverage Status](https://codecov.io/gh/taiga-family/ng-event-plugins/branch/main/graphs/badge.svg)](https://app.codecov.io/gh/taiga-family/ng-event-plugins/tree/main/projects)\n[![telegram chat](https://img.shields.io/badge/support-Contact%20us-blue)](https://t.me/taiga_ui)\n\n**@taiga-ui/event-plugins** is a tiny (1KB gzip) library for optimizing change detection cycles for performance\nsensitive events (such as _touchmove_, _scroll_, _drag_ etc.) and declarative _preventDefault()_ and\n_stopPropagation()_.\n\n## How to use\n\n1. Add `NG_EVENT_PLUGINS` to your app providers:\n\n   ```typescript\n   bootstrapApplication(AppComponent, {\n     providers: [NG_EVENT_PLUGINS],\n   });\n   ```\n\n2. Use new modifiers for events in templates and in `@HostListener`:\n\n   - `.stop` to call stopPropagation() on event\n   - `.prevent` to call preventDefault() on event\n   - `.self` to skip bubbled events\n   - `.zoneless` to call event handler outside Angular's `NgZone`\n   - `.capture` to listen to events in\n     [capture phase](https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase)\n   - `.passive` to add\n     [passive event listener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners)\n   - `.once` to remove event listener after first callback\n   - `resize` to watch for elements changing dimensions with `ResizeObserver`\n   - `.debounce~\u003cdelay\u003e` to delay the execution of the event handler for a specified time (ms or s)\n   - `.throttle~\u003cdelay\u003e` to limits how often the event handler can run for a specified time (ms or s)\n\n   For example:\n\n   ```html\n   \u003cdiv (mousedown.prevent)=\"onMouseDown()\"\u003eClicking on this DIV will not move focus\u003c/div\u003e\n   ```\n\n   ```html\n   \u003cdiv (click.stop)=\"onClick()\"\u003eClicks on this DIV will not bubble up\u003c/div\u003e\n   ```\n\n   ```html\n   \u003cdiv (mousemove.zoneless)=\"onMouseMove()\"\u003eCallbacks to mousemove will not trigger change detection\u003c/div\u003e\n   ```\n\n   ```html\n   \u003cdiv (click.capture.stop)=\"onClick()\"\u003e\n     \u003cdiv (click)=\"never()\"\u003eClicks will be stopped before reaching this DIV\u003c/div\u003e\n   \u003c/div\u003e\n   ```\n\n   ```html\n   \u003cbutton (click.debounce~300ms)=\"onClick()\"\u003eDebounced Click\u003c/button\u003e\n   \u003cbutton (click.debounce~2s)=\"onClick()\"\u003eDebounced Click\u003c/button\u003e\n   ```\n\n   ```html\n   \u003cbutton (click.throttle~300ms)=\"onClick()\"\u003eThrottled Click\u003c/button\u003e\n   \u003cbutton (click.throttle~2s)=\"onClick()\"\u003eThrottled Click\u003c/button\u003e\n   ```\n\n3. You can also re-enter `NgZone` and trigger change detection, using `@shouldCall` decorator that takes a predicate\n   function as argument:\n\n```html\n\u003cdiv (scroll.zoneless)=\"onScroll($event.currentTarget)\"\u003e\n  Scrolling this DIV will only trigger change detection and onScroll callback if it is scrolled to bottom\n\u003c/div\u003e\n```\n\n```typescript\nimport {shouldCall} from '@taiga-ui/event-plugins';\n\nexport function scrollFilter({\n scrollTop, scrollHeight, clientHeight\n}: HTMLElement): boolean {\n    return scrollTop === scrollHeight - clientHeight;\n}\n\n// ...\n\n@shouldCall(scrollFilter)\nonScroll(_element: HTMLElement): void {\n    this.someService.requestMoreData();\n}\n```\n\n4. Angular global events only support `body`, `window` and `document`. You can listen to events on any global object\n   with these plugins by replacing `:` with `\u003e` symbol, for example:\n\n```ts\n@HostListener('visualViewport\u003eresize', ['$event.target'])\nonPinchZoom({ scale }: VisualViewport) {\n    console.log(scale)\n}\n```\n\n5. iOS currently doesn't support the `contextmenu` event. Instead, you can use a custom `longtap` event. This event\n   captures the `contextmenu` event on non-iOS devices and simulates similar behavior on iOS devices.\n\n```html\n\u003cdiv (longtap)=\"showContextMenu($event.detail.clientX, $event.detail.clientY)\"\u003eDiv with context menu\u003c/div\u003e\n```\n\n\u003e All examples above work the same when used with `@HostListener` and `CustomEvent`\n\n### Important notes\n\n- Predicate is called with the same arguments as the decorated method and in the context of class instance (has access\n  to `this`)\n\n- Decorated method will be called and change detection triggered if predicate returns `true`.\n\n- `.zoneless` modifier will not work with built-in keyboard pseudo-events, such as `keydown.enter` or\n  `keydown.arrowDown` since Angular re-enters `NgZone` inside internal handlers.\n\n## Demo\n\nYou can try this\n[interactive demo](https://codesandbox.io/s/github/taiga-family/ng-event-plugins/tree/main/projects/demo)\n\nYou can also read this [detailed article](https://indepth.dev/supercharge-event-management-in-your-angular-application/)\nexplaining how this library works\n\n## Maintained\n\n**@taiga-ui/event-plugins** is a part of [Taiga UI](https://github.com/taiga-family/taiga-ui) libraries family which is\nbacked and used by a large enterprise. This means you can rely on timely support and continuous development.\n\n## License\n\n🆓 Feel free to use our library in your commercial and private applications\n\nAll **@taiga-ui/event-plugins** packages are covered by [Apache 2.0](/LICENSE)\n\nRead more about this license [here](https://choosealicense.com/licenses/apache-2.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaiga-family%2Fng-event-plugins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaiga-family%2Fng-event-plugins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaiga-family%2Fng-event-plugins/lists"}