title: ngx-bootstrap popover close on outside click
body: <p>i'm trying to create an Angular 4 custom form control as my date picker. I'm using ngx-bootstrap and i have so far setup this custom form control using an input, datepicker and popover component from ngx-bootstrap. The custom control opens a popover with the datepicker on focus, however, i need to be able to change date by interacting with the popover contents and it should close when iam not interacting with the popover or the input. I have tried to follow the hack on <a href="https://github.com/valor-software/ngx-bootstrap/issues/1477" rel="nofollow noreferrer">the ngx-bootstrap github issue</a>. However it isn't working for my case. Any help would be appreciated. </p>
  
  <p><strong>date-picker.component.html</strong></p>
  
  <pre><code>&lt;input type="text" [value]="getDate() | date:'fullDate'" #popover="bs-popover" [placeholder]="placeholder" class="form-control"  triggers="" (focus)="popover.show()" [popover]="popTemplate" container="body" required&gt;
  &lt;template  #popTemplate&gt;
    &lt;datepicker  [(ngModel)]="dt"  [minDate]="minDate" [showWeeks]="true"
                 [dateDisabled]="dateDisabled"&gt;&lt;/datepicker&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>date-picker.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'app-date-picker',
    templateUrl: './date-picker.component.html',
    styleUrls: ['./date-picker.component.scss'],
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() =&gt; DatePickerComponent),
        multi: true
      }
    ]
  })
  export class DatePickerComponent implements OnInit, ControlValueAccessor {
   @ViewChild('popover') popover;
  
    isOpen = false;
  
    @Input('placeholder') placeholder;
  constructor(private _er: ElementRef) {
  }
  
    @HostListener('click', ['$event']) onClick(event): void {
      console.log(event);
      if (
        this.isOpen
        &amp;&amp; !this._er.nativeElement.contains(event.target)
        &amp;&amp; !this.popover._popover!._componentRef!.location.nativeElement!.contains(event.target)
      ) {
        this.hide();
      }
    }
  
    hide() {
      this.isOpen = false;
      this.popover.hide();
    }
  
    show() {
      this.isOpen = true;
      this.popover.show();
    }
  }
  </code></pre>
  
  <p>This stays open even when i click outside the input or the popover. When is used the blur event, i couldn't even interact with the calendar. It would close even before i could select date.
  <a href="https://i.stack.imgur.com/njeQ4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/njeQ4.png" alt="enter image description here"></a></p>