{"id":13481438,"url":"https://github.com/arkon/ng-click-outside","last_synced_at":"2025-03-27T12:30:48.168Z","repository":{"id":46081878,"uuid":"61164978","full_name":"arkon/ng-click-outside","owner":"arkon","description":"[Inactive] Angular directive for handling click events outside of an element.","archived":true,"fork":false,"pushed_at":"2021-11-15T18:49:54.000Z","size":4028,"stargazers_count":233,"open_issues_count":15,"forks_count":60,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-10-30T15:50:45.774Z","etag":null,"topics":["angular","directive","event-handlers"],"latest_commit_sha":null,"homepage":"https://echeung.me/ng-click-outside/","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/arkon.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}},"created_at":"2016-06-15T00:23:11.000Z","updated_at":"2024-05-18T17:01:39.000Z","dependencies_parsed_at":"2022-08-29T11:00:45.004Z","dependency_job_id":null,"html_url":"https://github.com/arkon/ng-click-outside","commit_stats":null,"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkon%2Fng-click-outside","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkon%2Fng-click-outside/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkon%2Fng-click-outside/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkon%2Fng-click-outside/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arkon","download_url":"https://codeload.github.com/arkon/ng-click-outside/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245844816,"owners_count":20681783,"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","directive","event-handlers"],"created_at":"2024-07-31T17:00:51.811Z","updated_at":"2025-03-27T12:30:47.766Z","avatar_url":"https://github.com/arkon.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# ng-click-outside\n\n⚠️　**This package is deprecated and not maintained.** ⚠️\n\n---\n\n[![NPM](https://nodei.co/npm/ng-click-outside.png?compact=true)](https://nodei.co/npm/ng-click-outside/)\n\n**[Demo](https://echeung.me/ng-click-outside/)**\n\n*Formerly called [ng2-click-outside](https://github.com/arkon/ng2-click-outside)*\n\nAngular directive for handling click events outside an element. Useful for things like reacting to clicking\noutside of a dropdown menu or modal dialog.\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\n## Installation\n\n```shell\nnpm install --save ng-click-outside\n```\n\n\n## Usage\n\nAdd `ClickOutsideModule` to your list of module imports:\n\n```typescript\nimport { ClickOutsideModule } from 'ng-click-outside';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, ClickOutsideModule],\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### 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. |\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)). |\n| `emitOnBlur` | boolean | `false` | If enabled, emits an event when user clicks outside of applications' window while it's visible. Especially useful if page contains iframes. |\n| `exclude` | string | | A comma-separated string of DOM element queries to exclude when clicking outside of the element. For example: `[exclude]=\"'button,.btn-primary'\"`. |\n| `excludeBeforeClick` | boolean | `false` | By default, `clickOutside` registers excluded DOM elements on init. This property refreshes the list before the `clickOutside` event is triggered. This is useful for ensuring that excluded elements added to the DOM after init are excluded (e.g. ng2-bootstrap popover: this allows for clicking inside the `.popover-content` area if specified in `exclude`). |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farkon%2Fng-click-outside","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farkon%2Fng-click-outside","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farkon%2Fng-click-outside/lists"}