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

Question

[HlushkoArthur]

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

Answer 1

[Антон Швец]

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

  constructor(
    private elRef: ElementRef<HTMLElement>
  ) { }

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

<app-modalka  (clickOutside)="onClickOutside($event)"></app-modalka>

А вообще юи либы же поддерживают такое из коробки.
в материал или cdk/overlay это backdropClick.
А делать модалки не по cdk это не тру.

Answer 2

[Pavel Shvedov]

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