@busypixels/ngx-click-out NPM

NG(X) Click Out

A more performant way to trigger events when an element is clicked away from. By only initializing event listeners when an element is first interacted with, or whenever you so choose, preformance is greatly improved over other methods.

Installation

NPM:

npm i @busypixels/ngx-click-out

Yarn:

yarn add @busypixels/ngx-click-out

Usage:

Import the Module:

import { NgxClickOutModule } from '@busypixels/ngx-click-out';

@NgModule({
  ...
  imports: [
    ...
    NgxClickOutModule
    ...
  ],
  ...
})
export class AppModule { }

Add the `out` event.

  <div id="parent">
      <div id="inner-content" click-out (out)="handleClickOut()">
        Inner Content
      </div>
      <div id="outer-content">
        Outer Content
      </div>
  </div>

Inputs

Event	Type	Default	Description
inEvents	string[]	`['click']`	Array of event names that will initialize `outEvents`
outEvents	string[]	`['click', 'touchstart', 'focusin']`	Array of event names that will fire the `out` event