import { NgEventOutsideModule } from 'ng-event-outside';

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

Use the ngEventOutside directive in your html templates:

  <button (click)="toggleShow()"> Show <button>
  <div ngIf="*show" (ngEventOutside)="onEventOutside($event)"></div>

export class AppComponent {
  toggleShow() {
    this.show = !this.show;
  }
  
  onEventOutside($event) {
    this.show = false;
  }
}

Outputs

name	description
`(ngEventOutside)`	This event fires when `[eventListener]` invoked outside.

Inputs

Name	Type	Default	Description
`[excludes]`	`HTMLElement[]`	`[]`	An array of excluded elements.
`[eventListener]`	`string`	'click'	A String that specifies the name of the HTML DOM event.