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

Events

Event	description
in	Event fired when an element is initialized and ready to be clicked out of.
out	Event fired when an initialized element is clicked outside of.

Donate

If my work saves you time feel free to buy me a beer to keep it going. Cheers!