https://github.com/Kr0san89/ng-click-outside
Angular directive for handling click events outside of an element.
https://github.com/Kr0san89/ng-click-outside
Last synced: about 1 month ago
JSON representation
Angular directive for handling click events outside of an element.
- Host: GitHub
- URL: https://github.com/Kr0san89/ng-click-outside
- Owner: Kr0san89
- License: mit
- Fork: true (arkon/ng-click-outside)
- Created: 2022-01-04T16:44:38.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-02-12T15:03:58.000Z (2 months ago)
- Last Synced: 2025-02-12T15:52:25.457Z (2 months ago)
- Language: TypeScript
- Homepage: https://kr0san89.github.io/ng-click-outside/
- Size: 5.17 MB
- Stars: 12
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
- trackawesomelist - ng-click-outside (⭐13) - Angular directive for handling click events outside of an element. (Recently Updated / [Mar 20, 2025](/content/2025/03/20/README.md))
- awesome-angular - ng-click-outside - Angular directive for handling click events outside of an element. (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-click-outside - Angular directive for handling click events outside of an element. (Table of contents / Third Party Components)
README
# ng-click-outside2
[](https://www.npmjs.com/package/ng-click-outside2)
[](https://github.com/Kr0san89/ng-click-outside/blob/master/LICENSE)
[](https://www.github.com/angular/angular)
[](https://github.com/Kr0san89/ng-click-outside)
[](https://github.com/Kr0san89/ng-click-outside)
Angular directive for handling click events outside an element.
Like binding to a regular `click` event in a template, you can do something like this:
```HTML
My element
```
## Table of contents
1. [Installation](#installation)
2. [Compatibility](#compatibility)
3. [Options](#options)
4. [Usage](#example-usage)
5. [Migration from ng-click-outside](#migration-from-ng-click-outside)
## Installation
```shell
npm install --save ng-click-outside2
```
## Compatibility
| Angular | Version | NPM |
|----------|---------|-----------------------------|
| 13 | 10.x.x | `ng-click-outside2@^10.0.0` |
| 14,15,16 | 11.x.x | `ng-click-outside2@^11.0.0` |
| 16,17 | 12.x.x | `ng-click-outside2@^12.0.0` |
| 17 | 13.x.x | `ng-click-outside2@^13.0.0` |
| 17 | 14.x.x | `ng-click-outside2@^14.0.0` |
| 17,18 | 15.x.x | `ng-click-outside2@^15.0.0` |
| 18,19 | 16.x.x | `ng-click-outside2@^16.0.0` |
| 19 | 17.x.x | `ng-click-outside2@^17.0.0` |
If you use Angular <= 12 please use the original package. https://www.npmjs.com/package/ng-click-outside
### Options
| Property name | Type | Default | Description |
| ------------- |---------|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `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`) |
| `clickOutsideEnabled` | boolean | `true` | Enables directive. |
| `clickOutsideEvents` | string | `'click'` | A comma-separated list of events to cause the trigger. For example, for additional mobile support: `[clickOutsideEvents]="'click,touchstart'"`. |
| `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`) |
| `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`) |
| `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'"`. |
## Example Usage
Add `NgClickOutsideDirective` to your imports:
```typescript
import {NgClickOutsideDirective} from 'ng-click-outside2';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgClickOutsideDirective],
bootstrap: [AppComponent]
})
class AppModule {}
```
You can then use the directive in your templates:
```typescript
@Component({
selector: 'app',
template: `
Click outside this
`
})
export class AppComponent {
onClickedOutside(e: Event) {
console.log('Clicked outside:', e);
}
}
```
### Usage with Excluding classes
```typescript
import {NgClickOutsideDirective} from 'ng-click-outside2';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgClickOutsideDirective, NgClickOutsideExcludeDirective],
bootstrap: [AppComponent]
})
class AppModule {}
```
You can then use the directive in your templates:
```typescript
@Component({
selector: 'app',
template: `
Click outside this
`
})
export class AppComponent {
onClickedOutside(e: Event) {
console.log('Clicked outside:', e);
}
}
```
## Migration from ng-click-outside
```
// change imports
import { ClickOutsideModule } from 'ng-click-outside';
// to
import {NgClickOutsideDirective} from 'ng-click-outside2';
// and in Module import
ClickOutsideModule
// to
NgClickOutsideDirective
```
---