How to close modal on click outside modal?

Question

Angular

There is a modal and I need to make it so that when I click outside the modal, it closes. How to implement it?

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>

In general, Yui Libs support this out of the box.
to material or cdk/overlay is backdropClick.
And to do modals not by cdk is not true.

Answer 2

you make a transparent fixed background on the whole screen, well, or not transparent, usually it is shaded a little, and you track the click on this background