angular - 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;