function call on clicking NgbModal backdrop. anuglar 2 modal

Question

I am trying to make a function (Let's say 'randomFunction') call on clicking the backdrop (shaded part) of the modal used in angular2 using NgbModal.

Here is the companyNumberComponent.html:

<company-numbers-list (companyNumberModal)="modalService.open(companyNumberModal);"></company-numbers-list>

<template ngbModalContainer #companyNumberModal let-c="close" let-d="dismiss" id="companyNumberModal">
    <div class="modal-body">
        <company-number-modal></company-number-modal>
    </div>
    <div class="modal-footer text-center">
        <mi-button [type]="'info'" id="number_flow_close" [raised]="true" aria-label="close" (click)="c('Close click');
        ">Close</mi-button>
    </div>

here is the companyNumberComponent.ts file:

@Component
 .....
 export class companyNumberComponent(){
     constructor(private modalService: NgbModal){}
     public randomFunction(){
         console.log("hi");
     }
 }

Can someone please suggest me how to proceed in this or how to call this randomFunction() in the dismiss() or close() function of the modal.

Answer 1

Seems they are having in the docs, what you would be looking for, i.e ModalDismissReasons:

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

open(content) {
  this.modalService.open(content).result.then((result) => {}, (reason) => {
    if (reason === ModalDismissReasons.ESC || // if you want to check ESC as well
        reason === ModalDismissReasons.BACKDROP_CLICK) {
        this.randomFunction();
      }
  });
}

The close click doesn't seem to be included here at all, so either you can call randomFunction on the click event in template_

(click)="c('Close click'); randomFunction()"

or you can do it in the component, but in the first callback, where if the close button is clicked, it seems to throw the string 'Close click' at you (or whatever you define in template). So then modify the open as such:

open(content) {
  this.modalService.open(content).result.then((result) => {
    if(result === 'Close click') {
      this.randomFunction()
    }
  }, (reason) => {
      if (reason === ModalDismissReasons.ESC || 
          reason === ModalDismissReasons.BACKDROP_CLICK) {
          this.randomFunction();
      }
  });
}