Angular 2 ng-bootstrap close Modal

user172902 picture user172902 · Jan 30, 2017 · Viewed 25.6k times · Source

I am trying to close the modal that was presented to me through the open(content) function as shown in the example in the Documentation of ng-boostrap. In the website, it mentioned that i can call close or dismiss from NgbActiveModal.

So I included NgbActiveModal in the component and tried to call dismiss() or close(). Both of them doesn't work. First of all, dismiss() is undefined (Am I importing NgbActiveModal wrong?) When I call close(), it seems to want to call some weird function inside lib.dom.d.ts which is not what I want at all. So to me it seems like I have no access to the close and dismiss provided by ng-bootstrap even after I imported NgbActiveModal. Note that I can show the modal fine

In the example, the modal was closed via (click)="c('Close click')". I have no idea where that comes from.

So... How can I call the close() or dismiss() (Whichever works) to get rid of the modal

modal dismiss

Answer

user172902 picture user172902 · Jan 30, 2017

Answer can be found here. ng-bootstrap website is missing lots of information unfortunately Cannot close ng-bootstrap Modal

Inside the component class

  private modalRef: NgbModalRef;

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

  onSave() {
    this.modalRef.close();
  }