Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arkon/ng-click-outside
[Inactive] Angular directive for handling click events outside of an element.
https://github.com/arkon/ng-click-outside
angular directive event-handlers
Last synced: about 1 month ago
JSON representation
[Inactive] Angular directive for handling click events outside of an element.
- Host: GitHub
- URL: https://github.com/arkon/ng-click-outside
- Owner: arkon
- License: mit
- Archived: true
- Created: 2016-06-15T00:23:11.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-11-15T18:49:54.000Z (about 3 years ago)
- Last Synced: 2024-09-07T12:08:10.596Z (3 months ago)
- Topics: angular, directive, event-handlers
- Language: TypeScript
- Homepage: https://echeung.me/ng-click-outside/
- Size: 3.84 MB
- Stars: 233
- Watchers: 13
- Forks: 60
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - ng-click-outside - Angular 2+ directive for handling click events outside of an element. (Uncategorized / Uncategorized)
- awesome-angular-components - ng-click-outside - Angular 2+ directive for handling click events outside of an element. (Uncategorized / Uncategorized)
README
# ng-click-outside
⚠️ **This package is deprecated and not maintained.** ⚠️
---
[](https://nodei.co/npm/ng-click-outside/)
**[Demo](https://echeung.me/ng-click-outside/)**
*Formerly called [ng2-click-outside](https://github.com/arkon/ng2-click-outside)*
Angular directive for handling click events outside an element. Useful for things like reacting to clicking
outside of a dropdown menu or modal dialog.
Like binding to a regular `click` event in a template, you can do something like this:
```HTML
My element
```
## Installation
```shell
npm install --save ng-click-outside
```
## Usage
Add `ClickOutsideModule` to your list of module imports:
```typescript
import { ClickOutsideModule } from 'ng-click-outside';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, ClickOutsideModule],
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);
}
}
```
### 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. |
| `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)). |
| `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. |
| `exclude` | string | | A comma-separated string of DOM element queries to exclude when clicking outside of the element. For example: `[exclude]="'button,.btn-primary'"`. |
| `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`). |