could you please tell me how to close pop screen when use click outside in angular 4 ?In my demo application I have one button on click of button I am showing pop up screen (which is working find).I want it should close when User click outside but not on pop up screen in other words it should close when user click other than pop up screen .I try to make directive which detect click outside or inside but it not work for me here is my code

import { Directive,ElementRef } from '@angular/core';



@Directive({

  selector: '[appOutside]',

   host: {

   '(document:click)': 'onClick($event)',

  }

})

export class OutsideDirective {



  constructor(private elementRef: ElementRef) { }



  onClick(event) {

   if (!this.elementRef.nativeElement.contains(event.target)) // or some similar check

     alert('clicked')

     //doSomething();

  }



}

https://stackblitz.com/edit/angular-1xhibr?file=src%2Fapp%2Foutside.directive.ts