kit-outside-click

README

Scope

  • Popups and dropdowns
  • Custom blur handlers

API

[class] KitOutsideClickDirective

@Directive

Selector:'[kitOutsideClick]'

Emitted when user clicks not on current element.

Usage

<div (kitOutsideClick)="outside()"></div>

outside() method will be called on any click except at this div and his children.

Skip

You can define additional elements to skip:

<button #skip1>...</button>
<button #skip2>...</button>
<div (kitOutsideClick)="outside()"
     [skip]="[skip1, skip2]">
</div>

Use kitAnchor to skip components:

<app-some-component kitAnchor #skip1="anchor"></app-some-component>
<div (kitOutsideClick)="outside()"
     [skip]="[skip1]">
</div>

Example

Members

SignatureDescription
@Input() anchor: KitAnchor
@Input() skip: KitAnchor | KitAnchor[]

Define elements that are not considered as outside.

@Output() kitOutsideClick = new EventEmitter<any>()

[class] KitOutsideClickModule

@NgModule

Exports:[ KitOutsideClickDirective, ]

[class] KitOutsideClickService

@Injectable

Emits event when user clicks not on a hosted element.

Members

SignatureDescription
skip: HTMLElement[] = []
get outsideClick(): Observable<any>