Search code examples
angularng-bootstrap

How to programmatically close ng-bootstrap modal?

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.