Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ng-click-outside2

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng-click-outside2

Angular directive for handling click events outside an element.

  • 16.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

ng-click-outside2

NPM License Love Angular badge GitHub issues GitHub stars

Angular directive for handling click events outside an element.

Like binding to a regular click event in a template, you can do something like this:

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

Table of contents

  1. Installation
  2. Compatibility
  3. Options
  4. Usage
  5. Migration from ng-click-outside

Installation

npm install --save ng-click-outside2

Compatibility

AngularVersionNPM
1310.x.xng-click-outside2@^10.0.0
14,15,1611.x.xng-click-outside2@^11.0.0
16,1712.x.xng-click-outside2@^12.0.0
1713.x.xng-click-outside2@^13.0.0
1714.x.xng-click-outside2@^14.0.0
17,1815.x.xng-click-outside2@^15.0.0
1816.x.xng-click-outside2@^16.0.0

If you use Angular <= 12 please use the original package. https://www.npmjs.com/package/ng-click-outside

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. (Import: NgClickOutsideAttachOutsideDirective)
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). (Import NgClickOutsideDelayOutsideDirective)
clickOutsideEmitOnBlur--If enabled, emits an blurWindow event when user clicks outside of applications' window while it's visible. Especially useful if page contains iframes. (Import NgClickOutsideEmitOnBlurDirective)
clickOutsideExcludestringA comma-separated string of DOM element queries to exclude when clicking outside of the element. (Import NgClickOutsideExcludeDirective) For example: [clickOutsideExclude]="'button,.btn-primary'".

Example Usage

Add NgClickOutsideDirective to your imports:

import {NgClickOutsideDirective} from 'ng-click-outside2';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgClickOutsideDirective],
  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);
  }
}

Usage with Excluding classes

import {NgClickOutsideDirective} from 'ng-click-outside2';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgClickOutsideDirective, NgClickOutsideExcludeDirective],
  bootstrap: [AppComponent]
})
class AppModule {}

You can then use the directive in your templates:

@Component({
  selector: 'app',
  template: `
    <div (clickOutside)="onClickedOutside($event)" [clickOutsideExclude]="'.foo'">Click outside this</div>
  `
})
export class AppComponent {
  onClickedOutside(e: Event) {
    console.log('Clicked outside:', e);
  }
}

Migration from ng-click-outside

// change imports
import { ClickOutsideModule } from 'ng-click-outside';
// to
import {NgClickOutsideDirective} from 'ng-click-outside2';

// and in Module import
ClickOutsideModule
// to
NgClickOutsideDirective

Keywords

FAQs

Package last updated on 30 May 2024

Did you know?

Socket

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc