条件HTML元素外部的点击检测-Angular 6

Question

I have a custom select that appears conditionally in the DOM. I trying to detect the user clicks outside the element and remove the element from the DOM. Better i show you what appears to be the problem

HTML

 <div class="worker-info">
        <div (click)="showWorkersSelect = !showWorkersSelect" class="worker-name">
            <fa-icon [icon]="['fal', 'user-circle']" size="1x"></fa-icon>
            Worker name: <span>Anna</span>
            <fa-icon  class="select-worker-icon" [icon]="['fal', 'caret-down']" size="1x"></fa-icon>
        </div>

        <div #workerSelection @showWorkersSelect *ngIf="showWorkersSelect" class="select-worker-menu">
            <div  (click)="showWorkersSelect = !showWorkersSelect" class="select-worker-menu__worker-name">
              Essti
            </div>
            <div  (click)="showWorkersSelect = !showWorkersSelect"class="select-worker-menu__worker-name">
               Ilana
            </div>
        </div>
    </div>

So when the user clicks here

 <div (click)="showWorkersSelect = !showWorkersSelect" class="worker-name">

The showWorkersSelect becoming true and the selection appers.

TS

  @ViewChild('workerSelection') workerSelection: ElementRef
  public showWorkersSelect = false

      @HostListener('document:click', ['$event', '$event.target'])
      onClick(event: MouseEvent, targetElement: HTMLElement): void {
        if (this.showWorkersSelect) {
          if (!targetElement) {
            return;
          }
          const clickedInside = this.workerSelection.nativeElement.contains(targetElement);
          if (!clickedInside) {
              this.showWorkersSelect = false;
          }
        }
      }

Here I want to run the method only when the selection is shown and close it after the user clicks outside, but the method closing it immediately after it opens

Answer 1

If your worker-selection has a z-index>0, You can use a "div" between with a z-index between 0 and z-index of worker-selection that cover all the screen

<div class="backscreen" *ngIf="showWorkersSelect" (click)="showWorkersSelect=false">

.backscreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040; //<--use a z-index between 0 and z-index of selectWorker
    background-color: transparent;
}