CODEWITHSUNDEEP
angularbootstrap-modalngx-bootstrap
Julio Rodríguez
Julio Rodríguez

Reputation: 477

ngx-bootstrap modal inside a ngx-bootstrap modal

I'm developing an Angular application. I have an ngx-bootstrap modal which in turn is launched from a "parent" bootstrap modal. that is, it's a modal nested in another modal.

The line of code to close the modals is: this.bsModalRef.hide().

The thing is that it works perfectly when I click a button that triggers a function that executes that line of code, but, the big problem is when I execute the same line of code to close the child modal This one closes, but the parent modal loses the ability to close, even if hit the Close button which executes this line of code that closes the modal.

this is the button that closes the first ("parent") BsModalRef modal: 

 <button class="btn btn-oval btn-sm ml-2"
        (click)=" closeModal()"
        type="button">
        Close
      </button>

this is the function in the .ts file that makes the "Close" button closes the first modal:

  closeModal() {
    this.bsModalRef.hide();
  }

Now, second modal also must have an option to close it and return to the previous modal, as in the first modal that also has a close button that also executes this to return to the main screen: 

closeModal() {
    this.bsModalRef.hide();
  }

And effectively it closes the second modal, but when trying to close the first modal to return to the very main screen, this Close button stop working and there is no way to close it.

Why is this happening? Any suggestion?

Thanks.

Upvotes: 0

Views: 1159

Answers (1)

Hiras Haris
Hiras Haris

Reputation: 498

The problem is your using "bsModalRef" name in both child and parent component BsModalRef naming, change one to a different name.

Upvotes: 2

Related Questions