скрыть уведомление при нажатии на другое место страницы в angular 9

Question

У меня есть модал для показа уведомлений в angular 9.

У меня есть кнопка для показа или скрытия модальности, и она сработала, но мне нужно, когда я нажимаю на другое место на странице (не показывать) / скрыть кнопку) Если модальный на шоу, скрыть его.

это Демо .

html:

    <div class="header">
 <button (click)="toggleFunction()">show</button>
<div class="showButton" id="showNotification">
  <span>this is test</span>
</div>
</div>

ts:

   export class TopeheaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
    toggleFunction() {
        let element = document.getElementById('showNotification');
        if (element.style.display === '' || element.style.display === 'none') {
            element.style.display = 'block';
        } else if (element.style.display === 'block') {
            element.style.display = 'none';
        }
    }
}

как я могу решить эту проблему?

Answer 1

вы можете использовать HostListener, чтобы обнаружить щелчок за пределами целевого элемента

компонент

  isHide: boolean = true;

  toggleFunction(e: MouseEvent) {
    e.stopPropagation();
    this.isHide = !this.isHide; // toggle the notification 
  }

  @HostListener("document:click") hideOnClick() {
    this.isHide = true;
  }

шаблон

<div class="header">
    <button (click)="toggleFunction($event)">show</button>
    <div class="showButton" [ngClass]="{'d-none':isHide}">
        <span>this is test</span>
    </div>
</div>

Я просто обновляю логи c Обновление элементной базы класса переключения с помощью директивы ngClass более читабельно и проще. stopPropagation останавливает всплывающее событие, чтобы слушатель верхнего события не перехватывал это событие.

demo ?

Answer 2

Вы можете использовать HostListener и ViewChild. Пожалуйста, добавьте этот селектор на html

<button #showButton (click)="toggleFunction()">show</button>

и добавьте свой файл TS

@ViewChild('showButton') showButton: ElementRef;
@HostListener('document:click', ['$event'])
  clickout(event) {
    let element = document.getElementById('showNotification');
    if (element.style.display === 'block') {
      if (!document.getElementById('showNotification').contains(event.target) &&
      !this.showButton.nativeElement.contains(event.target) ) {
        element.style.display = 'none';
      }
    }
}

WORKING DEMO