ngx-event-handler

This directive can be used to handle events, by default click events, that matches given critera. For example: handle or span click, handle all clicks where element has class '.custom-button', handle all clicks where id is not 'toolbar' and also class is not .selection.

The matching occurs by checking the target element and it's parents. This makes it easy to define: don't trigger my 'clickoutside' event when clicking the div with id: 'toolbar' and also don't trigger when any of the child elements of the toolbar is clicked.

See the demo project for examples:

• click outside
• bind multiple event at once
• bind events to html injected in the innerHTML

Stackblitz

Changes

Install the NPM Module

npm install ngx-event-handler --save

Usage

1. Import NgxEventHandlerModule

@NgModule({
    imports: [NgxEventHandlerModule]
  })
  export class AppModule { }

2. Add handleEvent to a htmlElement:

    <div (handleEvent)="deselect()" [exclusion]="['#buttons', '#text-control']">

API:

handleEvent:

Input:

• exclusion: Array with classes, ids or element names. An event where the target matches one of these elements or it's children won't trigger handleEvent. Example: ['#toolbar, 'button', '.selected']. Default: []
• inclusion: Array with classes, ids or element names. By default all elements, except the ones excluded are included. When providing a list of inclusion elements, it will only trigger Handle event if the target matches the inclusion array (or children) and doesn't match an element in the exclusion array.
• target = 'window': the target where it listens to events.
• event = 'click': the event listened to.
• keepInclusionListInsideDirective = true; when providing inclusion items, if true; these will only be matched with the directive. if false, it matches all elements on the page
• maxLevelup = 20; level of parents that are checked to match a inclusion or exclusion.
• delay = 0; delay before handleEvent is trigged;

Output:

• handleEvent: EventEmitter: fires when an event (by default click) occurs on a element that matches the provided inclusion/exclusion list. By default; if nothing not inputs are provided on the directive, every click will trigger this event.
• handleOutsideEvent: EventEmitter: fires when an event (by default click) occurs, but not on a element that matches the provided inclusion/exclusion list.

outsideEvent:

Input:

See handleEvent except include list. Set the directive and event on an element for which you want to have the clickout side. With [excluded] you can add elements that should not trigger the outside click.

Output:

• outsideEvent: EventEmitter

The function used to create an observable on page events can always be used without the directive.

    createObservableHandler(renderer: Renderer2, target = 'window', event = 'click', delayMs = 0)