How to programmatically close ng-bootstrap modal? How to programmatically close ng-bootstrap modal? angular angular

How to programmatically close ng-bootstrap modal?


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;


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.


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!