Description

ngx-outclick enables angular developers to detect clicks outside elements with ease.

A centralised service is used to detect clicks outside and therefore a new document:click event won't be created everytime. Moreover, rxjs has been used to its fullest potential to ensure reactiveness.

ENJOY

Usage

Import OutclickModule in the .module file

app.module.ts

import { NgModule } from '@angular/core';
import { OutclickModule } from 'ngx-outclick';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
    AppComponent
],
imports: [
    ...,
    OutclickModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Use it in any element/component in that module. Add outclick inside the opening tag to create the directive. Use the (out-click) event which emits an Event object

app.component.html

<div outclick (out-click)="func($event)" style="height: 100px; width: 100px; background-color:black"></div>

app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'outclick-test';

    func(event: Event) {

        console.log(event);
        //do whatever you want with the event
    }
}