Angular 4 выпадающее меню нажмите, чтобы закрыть

Question

У меня есть демо здесь - https://stackblitz.com/edit/angular-lewrxv?file=app%2FClickElsewhereDirective.ts

У меня есть раскрывающееся меню, которое открывается при нажатии кнопки.

Я хочу закрыть меню, когда вы щелкаете в другом месте.

Я использую директиву для выдачи события, когда я щелкаю вне меню.

Журнал консоли работает до отправки события, но как я могу использовать это, чтобы закрыть меню.

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

@Directive({ selector: '[clickElsewhere]' })

export class ClickElsewhereDirective {
  @Output() clickElsewhere = new EventEmitter<MouseEvent>(); 

  constructor(private elementRef: ElementRef) {}

  @HostListener('document:click', ['$event'])
  public onDocumentClick(event: MouseEvent): void {
    const targetElement = event.target as HTMLElement;

      // Check if the click was outside the element
      if (targetElement && !this.elementRef.nativeElement.contains(targetElement)) {
         console.log(event) 
         this.clickElsewhere.emit(event);
      }
  }
}

Answer 1

Вы должны подписаться на события ваших директив следующим образом:

(clickElsewhere)="closeDropdown()"

Возможно, вам придется изменить размеры div, поля и т. Д., Но это будет работать.

Вот обновленная демка: https://stackblitz.com/edit/angular-qumejg