How to programmatically close ng-bootstrap modal?

Issue

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?

Solution

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.

Answered By – pkozlowski.opensource

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.