catching dismiss event ngx-bootstrap modal

Question

I'm using angular 6 and ngx-bootstrap 3.0.1

I display a modal and I want to be able to show a discard/cancel confirmation when the user try to close the modal after updating the form.

I have no issue when the user use my custom close button, but I don't know how to call my closing function when he use the backdrop-click outside the modal.

How can I handle the backdrop-click cleanly to be able to display my confirmation message?

Answer 1

Open your modal with options

this.bsModalRef = this.modalService.show(ExampleModal, {
  ignoreBackdropClick: true,
  keyboard: false
});

In ExampleModal place this code

ngOnInit(): void {
     document.documentElement.addEventListener('click',  this.hideIfIsBackdropClick.bind(this)); 
}

hideIfIsBackdropClick(event: any): void {
     if (event.target.classList.contains('modal')) {
        this.hide();
     }
}

hide(): void {
   if (anyBooleanHere) {
      this.bsModalRef.hide();
   }
}