How to programmatically close ng-bootstrap modal?

Question

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?

Answer 1

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;