ng-click-outside

WebJar for ng-click-outside

License	MIT
Categories	IDE Development Tools CLI User Interface
GroupId	org.webjars.npm
ArtifactId	ng-click-outside
Last Version	4.0.0
Release Date	Jan 21, 2019
Type	jar
Description	ng-click-outside WebJar for ng-click-outside
Project URL	http://webjars.org
Source Code Management	https://github.com/arkon/ng-click-outside

Download ng-click-outside

Filename	Size
ng-click-outside-4.0.0.pom
ng-click-outside-4.0.0.jar	12 KB
ng-click-outside-4.0.0-sources.jar	22 bytes
ng-click-outside-4.0.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/ng-click-outside/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>ng-click-outside</artifactId>
    <version>4.0.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/ng-click-outside/
implementation 'org.webjars.npm:ng-click-outside:4.0.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/ng-click-outside/
implementation ("org.webjars.npm:ng-click-outside:4.0.0")

Apache Buildr

'org.webjars.npm:ng-click-outside:jar:4.0.0'

Apache Ivy

<dependency org="org.webjars.npm" name="ng-click-outside" rev="4.0.0">
  <artifact name="ng-click-outside" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='ng-click-outside', version='4.0.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "ng-click-outside" % "4.0.0"

Leiningen

[org.webjars.npm/ng-click-outside "4.0.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

ng-click-outside

⚠️ 　This package is not actively maintained. ⚠️

---

Demo

Formerly called 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:

<div (clickOutside)="onClickedOutside($event)">My element</div>

Installation

npm install --save ng-click-outside

Usage

Add ClickOutsideModule to your list of module imports:

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:

@Component({
  selector: 'app',
  template: `
    <div (clickOutside)="onClickedOutside($event)">Click outside this</div>
  `
})
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).
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).

Versions

Version
4.0.0 Jan 21, 2019