Angular 4 directive for handling click events outside an element.
npm install ng4-click-outside
Formerly called ng2-click-outside
Angular 2+ directive for handling click events outside an element. Useful for things like reacting to clicking
outside of a dropdown menu or modal dialog.
NOW WORKS WITH ANGULAR UNIVERSAL
Like binding to a regular click event in a template, you can do something like this:
``HTML`My element
`shell`
npm install --save ng4-click-outside
Add ClickOutsideModule to your list of module imports:
`typescript
import { ClickOutsideModule } from 'ng4-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:
})
export class AppComponent {
onClickedOutside(e: Event) {
console.log('Clicked outside:', e);
}
}
$3
| Property name | Type | Default | Description |
| ------------- | ---- | ------- | ----------- |
|
| 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. |
| delayClickOutsideInit | boolean | false | Delays the initialization of the click outside handler. This may help for items that are conditionally shown (see issue #13). |
| clickOutsideEvents | string | 'click' | Allows for a space-separated list of events to cause the trigger. For example, for additional mobile support: [clickOutsideEvents]="'click touchstart'". |
| 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`). |