Angular 2 ng-bootstrap close modal

Question

I am trying to close a modal that was introduced to me through the open (content) function, as shown in the example in Documentation ng-boostrap. On the website, he mentioned that I can call or close from NgbActiveModal.

So, I included NgbActiveModal in the component and tried to call the dismiss () or close () function. Both of them do not work. First of all, dismissing () is undefined (Am I importing NgbActiveModal incorrectly?) When I call close (), it seems like you want to call some weird function inside lib.dom.d.ts, which is not what I want at all . So it seems to me that I do not have access to the closure and termination provided by ng-bootstrap, even after I imported NgbActiveModal. Please note that I can show modal thin

In this example, the modal was closed with (click) = "c ('Close click')". I have no idea where it came from.

So ... How can I call the close () or cancel () function (which works) to get rid of the modal

Answer 1

The answer can be found here. The site ng-bootstrap is missing a lot 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(); } 

Answer 2

• In your modal component you need to add the line:

   @ViewChild('exampleModal') public exampleModal:ModalDirective; 

• In html modal, you need to insert a div into the root:

   #exampleModal="bs-modal" 

• In your modal component:

   onSave(){ this.exampleModal.hide(); }