{"id":26533428,"url":"https://github.com/Kr0san89/ng-click-outside","last_synced_at":"2025-03-21T19:05:27.170Z","repository":{"id":38308078,"uuid":"444494070","full_name":"Kr0san89/ng-click-outside","owner":"Kr0san89","description":"Angular directive for handling click events outside of an element.","archived":false,"fork":true,"pushed_at":"2025-02-12T15:03:58.000Z","size":5426,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T15:52:25.457Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://kr0san89.github.io/ng-click-outside/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"arkon/ng-click-outside","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kr0san89.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":"SECURITY.md","support":null,"governance":null}},"created_at":"2022-01-04T16:44:38.000Z","updated_at":"2025-02-12T15:03:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"db9f38c8-e753-49fb-b22f-4c1a38e55818","html_url":"https://github.com/Kr0san89/ng-click-outside","commit_stats":{"total_commits":208,"total_committers":15,"mean_commits":"13.866666666666667","dds":0.3653846153846154,"last_synced_commit":"2d364037aa285f3775af6036293398e45e56b520"},"previous_names":[],"tags_count":56,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kr0san89%2Fng-click-outside","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kr0san89%2Fng-click-outside/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kr0san89%2Fng-click-outside/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kr0san89%2Fng-click-outside/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kr0san89","download_url":"https://codeload.github.com/Kr0san89/ng-click-outside/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244852677,"owners_count":20521155,"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":"2025-03-21T19:02:18.133Z","updated_at":"2025-03-21T19:05:27.123Z","avatar_url":"https://github.com/Kr0san89.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Mar 20, 2025](/content/2025/03/20/README.md)","Directives"],"readme":"# ng-click-outside2\n\n\n[![NPM](https://img.shields.io/npm/v/ng-click-outside2?color=orange\u0026style=flat-square)](https://www.npmjs.com/package/ng-click-outside2)\n[![License](https://img.shields.io/github/license/Kr0san89/ng-click-outside?color=blue\u0026style=flat-square)](https://github.com/Kr0san89/ng-click-outside/blob/master/LICENSE)\n[![Love Angular badge](https://img.shields.io/badge/angular-love-blue?logo=angular\u0026angular=love)](https://www.github.com/angular/angular)\n[![GitHub issues](https://img.shields.io/github/issues/Kr0san89/ng-click-outside.svg \"GitHub issues\")](https://github.com/Kr0san89/ng-click-outside)\n[![GitHub stars](https://img.shields.io/github/stars/Kr0san89/ng-click-outside.svg \"GitHub stars\")](https://github.com/Kr0san89/ng-click-outside)\n\nAngular directive for handling click events outside an element.\n\nLike binding to a regular `click` event in a template, you can do something like this:\n\n```HTML\n\u003cdiv (clickOutside)=\"onClickedOutside($event)\"\u003eMy element\u003c/div\u003e\n```\n\n## Table of contents\n1. [Installation](#installation)\n2. [Compatibility](#compatibility)\n3. [Options](#options)\n4. [Usage](#example-usage)\n5. [Migration from ng-click-outside](#migration-from-ng-click-outside)\n\n## Installation\n\n```shell\nnpm install --save ng-click-outside2\n```\n\n## Compatibility\n| Angular  | Version | NPM                         |\n|----------|---------|-----------------------------| \n| 13       | 10.x.x  | `ng-click-outside2@^10.0.0` |\n| 14,15,16 | 11.x.x  | `ng-click-outside2@^11.0.0` |\n| 16,17    | 12.x.x  | `ng-click-outside2@^12.0.0` |\n| 17       | 13.x.x  | `ng-click-outside2@^13.0.0` |\n| 17       | 14.x.x  | `ng-click-outside2@^14.0.0` |\n| 17,18    | 15.x.x  | `ng-click-outside2@^15.0.0` |\n| 18,19    | 16.x.x  | `ng-click-outside2@^16.0.0` |\n| 19       | 17.x.x  | `ng-click-outside2@^17.0.0` |\n\nIf you use Angular \u003c= 12 please use the original package. https://www.npmjs.com/package/ng-click-outside\n\n### Options\n\n| Property name | Type    | Default   | Description                                                                                                                                                                                                                                                                                        |\n| ------------- |---------|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `attachOutsideOnClick` | boolean | `false`   | By default, the outside click event handler is automatically attached. Explicitely setting this to `true` sets the handler after the element is clicked. The outside click event handler will then be removed after a click outside has occurred. (Import: `NgClickOutsideAttachOutsideDirective`) |\n| `clickOutsideEnabled` | boolean | `true`    | Enables directive.                                                                                                                                                                                                                                                                                 |\n| `clickOutsideEvents` | string  | `'click'` | A comma-separated list of events to cause the trigger. For example, for additional mobile support: `[clickOutsideEvents]=\"'click,touchstart'\"`.                                                                                                                                                    |\n| `delayClickOutsideInit` | boolean | `false`   | Delays the initialization of the click outside handler. This may help for items that are conditionally shown ([see issue #13](https://github.com/arkon/ng-click-outside/issues/13)). (Import `NgClickOutsideDelayOutsideDirective`)                                                                                                     |\n| `clickOutsideEmitOnBlur` | -       | -         | If enabled, emits an `blurWindow` event when user clicks outside of applications' window while it's visible. Especially useful if page contains iframes. (Import `NgClickOutsideEmitOnBlurDirective`)                                                                                              |\n| `clickOutsideExclude` | string  |           | A comma-separated string of DOM element queries to exclude when clicking outside of the element. (Import NgClickOutsideExcludeDirective) For example: `[clickOutsideExclude]=\"'button,.btn-primary'\"`.                                                                                             |\n\n## Example Usage\n\nAdd `NgClickOutsideDirective` to your imports:\n\n```typescript\nimport {NgClickOutsideDirective} from 'ng-click-outside2';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, NgClickOutsideDirective],\n  bootstrap: [AppComponent]\n})\nclass AppModule {}\n```\n\nYou can then use the directive in your templates:\n\n```typescript\n@Component({\n  selector: 'app',\n  template: `\n    \u003cdiv (clickOutside)=\"onClickedOutside($event)\"\u003eClick outside this\u003c/div\u003e\n  `\n})\nexport class AppComponent {\n  onClickedOutside(e: Event) {\n    console.log('Clicked outside:', e);\n  }\n}\n```\n\n### Usage with Excluding classes\n```typescript\nimport {NgClickOutsideDirective} from 'ng-click-outside2';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, NgClickOutsideDirective, NgClickOutsideExcludeDirective],\n  bootstrap: [AppComponent]\n})\nclass AppModule {}\n```\n\nYou can then use the directive in your templates:\n\n```typescript\n@Component({\n  selector: 'app',\n  template: `\n    \u003cdiv (clickOutside)=\"onClickedOutside($event)\" [clickOutsideExclude]=\"'.foo'\"\u003eClick outside this\u003c/div\u003e\n  `\n})\nexport class AppComponent {\n  onClickedOutside(e: Event) {\n    console.log('Clicked outside:', e);\n  }\n}\n```\n\n\n## Migration from ng-click-outside\n\n```\n// change imports\nimport { ClickOutsideModule } from 'ng-click-outside';\n// to\nimport {NgClickOutsideDirective} from 'ng-click-outside2';\n\n// and in Module import\nClickOutsideModule\n// to\nNgClickOutsideDirective\n```\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKr0san89%2Fng-click-outside","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKr0san89%2Fng-click-outside","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKr0san89%2Fng-click-outside/lists"}