How to programmatically close ng-bootstrap modal?

89,736

Solution 1

If you are using https://ng-bootstrap.github.io/ (as indicated in your question) things are extremely simple - you can just open a modal and either close it from a template (as in your code) or programmatically (by calling close() method on the returned Object of type NgbModalRef).

Here is a minimal example showing this in action: http://plnkr.co/edit/r7watmQuyaUQ8onY17Z1?p=preview

You might be either confusing different libraries or maybe there is sth more to your question but it is hard to say more based just on the info provided.

Solution 2

To expound upon pkozlowski.opensource's response, the way I actually got the reference to the NgbModalRef class was by modifying what is in his plunker on the this.modalService.open as follows:

this.modalReference = this.modalService.open(content);
this.modalReference.result.then((result) => {
  this.closeResult = `Closed with: ${result}`;
}, (reason) => {
  this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});

Then I was able to call:

this.modalReference.close();

Which worked like a charm. Oh, and don't forget to put define modalReference at the top of the class:

modalReference: any;

Solution 3

Unlike TBrenner i couldn't' just use modalReference: any;

I run with:

    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
    with angular 5

I had to import in my app.module.ts

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

and of course add it to the providers:

providers[ NgbModal]

once it's done here is the code from the modal component:

 import { Component, Input } from '@angular/core'; 
 import { ModalDismissReasons, NgbModal, NgbModalRef } from '@ng 
 bootstrap/ng-bootstrap';

export class MyClass {
modalReference: NgbModalRef;

constructor(private modalService: NgbModal)
open(content) {
this.modalReference = this.modalService.open(content);
this.modalReference.result.then((result) => {
  this.closeResult = `Closed with: ${result}`;
}, (reason) => {
  this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}

private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
  return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
  return 'by clicking on a backdrop';
} else {
  return `with: ${reason}`;
}
}

JoinAndClose() {
this.modalReference.close();
}

https://ng-bootstrap.github.io should add some information about the reference importance.. I struggled a little bit to understand I needed to create a reference to access the ".close()" method. Thanks you all, it helped a lot!

Solution 4

You can simply close the modal by below way.

First when we open the Modal

this.modalService.open(content, { size: "lg" }).result.then(
      result => {
        this.closeResult = `Closed with: ${result}`;
      },
      reason => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      }

After That in TS For closing use this

 this.modalService.dismissAll();

Solution 5

To open the modal

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

modalReference = null;     

constructor(private modalService: NgbModal) {

   }

openVerticallyCentered(content) {
    this.modalReference = this.modalService.open(content, { centered: true });
  }

to close the modal using the reference, like Amit said

this.modalReference.close();

source:https://ng-bootstrap.github.io/#/components/modal/examples

Share:
89,736

Related videos on Youtube

Alex Kibler
Author by

Alex Kibler

Updated on July 09, 2022

Comments

  • Alex Kibler
    Alex Kibler over 1 year

    I've got a modal:

    <template #warningModal let-c="close" let-d="dismiss">
      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Warning</h4>
      </div>
      <div class="modal-body">
          The numbers you have entered result in negative expenses.  We will treat this as $0.00.  Do you want to continue?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="c('Close click')">No</button>
        <button type="button" class="btn btn-secondary" (click)="submit()">Yes</button>
      </div>
    </template>
    

    Whenever I click yes, I want it to call a function and close itself.
    In my controller, I have @ViewChild('warningModal') warning; and in submit(), I have this.warning.close();, but I get this.warning.close is not a function whenever I click Yes.

    How do I get this to work the way I want it to?

    • Meir
      Meir about 7 years
      is it ng-bootstrap or ng2-bootstrap?
  • Alex Kibler
    Alex Kibler about 7 years
    Thanks! That's exactly how I solved it. I just forgot to come back and edit. Your project is amazing, btw.
  • Christophe Chenel
    Christophe Chenel over 5 years
    Awesome answer! Don't forget to import NgbModalRef!
  • Jonesopolis
    Jonesopolis over 5 years
    you don't actually need to import it if you define modalReference like he did
  • core114
    core114 almost 5 years
    plunker doesn't work but your solution is work for me,
  • Darren Smith
    Darren Smith almost 5 years
    you can optionally pass argument to close, eg, this.modalReference.close("submitted");
  • Nazrul Muhaimin
    Nazrul Muhaimin almost 5 years
    i found this answer straight to the point that can solve my solution fastest.
  • bl2b
    bl2b almost 5 years
    after an hour solving this problem, i found this..thanks it helps a lot
  • Lovell D'souza
    Lovell D'souza about 4 years
    Adding to that, the model reference can be set to type: NgbModalRef.
  • Anandhukrishna VR
    Anandhukrishna VR almost 4 years
    this.modalService.dismissAll(); this case work for me! Thank you buddy
  • user975260
    user975260 over 3 years
    this is perfect ans.
  • Admin
    Admin about 3 years
    This is fine if indeed you want to close all open modals but not if you want to keep one open.
  • mohsen
    mohsen over 2 years
    Thanks! This finally did it for me.
  • PawZaw
    PawZaw almost 2 years
    this thing should be in documentation, great solution