ng-click-outside
    TypeScript icon, indicating that this package has built-in type declarations

    8.0.0 • Public • Published

    ng-click-outside

    ⚠️ This package is not actively maintained. ⚠️


    NPM

    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).

    Install

    npm i ng-click-outside

    DownloadsWeekly Downloads

    50,548

    Version

    8.0.0

    License

    MIT

    Unpacked Size

    29.9 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar