Как закрывать модалку при клике внё неё?

В Angular есть несколько способов закрыть модальное окно при клике вне него. Один из наиболее распространенных методов - это использование директивы "click" в комбинации с проверкой, находится ли кликнутый элемент за пределами модального окна. Вот как можно реализовать эту функциональность в Angular:

1. Создайте директиву, которая будет отслеживать клики вне модального окна. Вы можете использовать директиву, ассоциированную с родительским компонентом модального окна, или создать отдельную директиву для этой цели. В примере ниже я буду использовать директиву, ассоциированную с родительским компонентом модального окна:

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

@Directive({
  selector: '[clickOutside]'
})
export class ClickOutsideDirective {
  @Output() clickOutside: EventEmitter<boolean> = new EventEmitter();

  constructor(private elementRef: ElementRef) {}

  @HostListener('document:click', ['$event.target'])
  onClick(targetElement: any) {
    const clickedInside = this.elementRef.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.clickOutside.emit(true);
    }
  }
}

2. В компоненте модального окна импортируйте и используйте директиву, созданную на предыдущем шаге:

import { Component } from '@angular/core';

@Component({
  selector: 'app-modal',
  template: `
    <div class="modal" clickOutside (clickOutside)="closeModal()">
      <!-- Код модального окна -->
    </div>
  `
})
export class ModalComponent {
  closeModal() {
    // Здесь вы можете выполнить действия при закрытии модального окна, например, отправить событие родительскому компоненту
  }
}

3. В методе closeModal() вы можете выполнить любые необходимые действия при закрытии модального окна, например, отправить событие родительскому компоненту или изменить флаг, который контролирует видимость модального окна.

Таким образом, при клике вне модального окна, директива ClickOutsideDirective будет срабатывать и вызывать метод closeModal() в компоненте модального окна, что позволит закрыть его.