Socket
Socket
Sign inDemoInstall

ng-click-outside

Package Overview
Dependencies
5
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    ng-click-outside

[DEPRECATED] Angular directive for handling click events outside an element.


Version published
Weekly downloads
39K
decreased by-21.85%
Maintainers
1
Install size
27.1 kB
Created
Weekly downloads
 

Readme

Source

ng-click-outside

⚠️ This package is deprecated and not 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 nameTypeDefaultDescription
attachOutsideOnClickbooleanfalseBy 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.
clickOutsideEnabledbooleantrueEnables directive.
clickOutsideEventsstring'click'A comma-separated list of events to cause the trigger. For example, for additional mobile support: [clickOutsideEvents]="'click,touchstart'".
delayClickOutsideInitbooleanfalseDelays the initialization of the click outside handler. This may help for items that are conditionally shown (see issue #13).
emitOnBlurbooleanfalseIf enabled, emits an event when user clicks outside of applications' window while it's visible. Especially useful if page contains iframes.
excludestringA comma-separated string of DOM element queries to exclude when clicking outside of the element. For example: [exclude]="'button,.btn-primary'".
excludeBeforeClickbooleanfalseBy 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).

Keywords

FAQs

Last updated on 15 Nov 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc