Обнаружение кликов за пределами условного элемента HTML - Angular 6

Question

У меня есть пользовательский выбор, который условно отображается в DOM.Я пытаюсь обнаружить щелчки пользователя за пределами элемента и удалить элемент из DOM.Лучше я покажу вам, в чем проблема

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>

Поэтому, когда пользователь нажимает здесь

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

showWorkersSelect становится true, и выбор вступает в силу.

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;
          }
        }
      }

Здесь я хочу запустить метод только тогда, когда выделение показано, и закрыть его послепользователь щелкает снаружи, но метод закрывает его сразу после открытия

Answer 1

Если ваш рабочий выбор имеет z-индекс> 0, вы можете использовать «div» между z-индексом между 0 и z-индексом рабочего выбора, который охватывает весь экран

<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;
}