How to close Ng-bootstrap Model

Question

I have a component in which there is two bootstrap model which opens based on certain conditions.

I have a button on both the model on click of which there is an http call on success I need to close the model.

I am using modelRef for doing it. This works fine for one but doesn't work for the other.

<ng-template #viewRemark let-c="close" let-d="dismiss">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title text-center" id="NewPricingTitle">Remarks </h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true" (click)="d('Cross click')">✕</span>
      </button>
    </div>
    <div class="modal-body mt-0 pt-0">

      <div class="row table-filter">
        <div class="col">
          <div class="form-group row">
            <label for="staticEmail" class="col-sm-5 col-form-label">PO Number:</label>
            <div class="col-sm-7">
              <input type="text" readonly="" class="form-control-plaintext font-weight-bold" value="{{modalData.orderNumber}}">
            </div>
          </div>
          <div class="form-group row">
            <label for="staticEmail" class="col-sm-5 col-form-label">PO Date:</label>
            <div class="col-sm-7">
                <input type="text" readonly="" class="form-control-plaintext font-weight-bold" value="{{modalData.orderDate  | date:'dd/mm/yyyy'}}">
              <label>{{modalData.orderdate  | date:'dd/mm/yyyy'}}</label>
            </div>
          </div>


        </div>
      </div>
      <hr/>
      <textarea  class="text-area" [(ngModel)]="remarks"></textarea>
      <!-- <p class="text-center modal-p">{{modalData.remarks}}</p> -->

    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary modal-add" (click)="updateRemarks()">ADD</button>
    </div>
  </div>
</ng-template>

<ng-template #changeStatus let-c="close" let-d="dismiss">
  <div class="modal-dialog modal-dialog-centered m-0" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-center" id="NewPricingTitle">Update Order Status - {{changeOrderStatusData.orderNumber}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" (click)="d('Cross click')">✕</span>
        </button>
      </div>
      <div class="modal-body mt-0 pt-0">

        <div class="row table-filter">
          <div class="col">
            <div class="form-group row">
              <label for="staticEmail" class="col-sm-5 col-form-label">PO Date:</label>
              <div class="col-sm-7">
                <input type="text" readonly="" class="form-control-plaintext font-weight-bold" value="{{changeOrderStatusData.orderDate}}">
              </div>
            </div>
            <div class="form-group row">
              <label for="staticEmail" class="col-sm-5 col-form-label">Current Status:</label>
              <div class="col-sm-7">
                <input type="text" readonly="" class="form-control-plaintext text-warning" value="{{changeOrderStatusData.status}}">
              </div>
            </div>
            <div class="select-box box-modal mt-5">
              <label>
                <select class="form-control form-control-sm" [(ngModel)]="newStatus">
                  <option value="SelectStatus" selected="selected">Select Status </option>
                  <option value="Accepted">Accepted </option>
                  <option value="Rejected">Rejected </option>
                  <option value="Ready to Ship"> Ready to Ship </option>
                  <option value="PartiallyShipped"> Partially Shipped </option>
                  <option value="Delivered"> Delivered </option>
                  <option value="Rejected"> Rejected </option>
                  <option value="Invoiced"> Invoiced </option>
                </select>
              </label>

            </div>

          </div>
        </div>

      </div>
      <div class="modal-footer">
        <div class="container-fulid">
          <div class=" my-3">
            <div class="col text-center">
              <button type="button" class="btn btn-outline-primary" (click)="d('CANCEL click')">CANCEL</button>
              <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" (click)="updateStatus(changeOrderStatusData.orderId)">UPDATE</button>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</ng-template>

Answer 1

Get the model reference by adding DI in constructor

constructor(config: NgbModalConfig, private modalService: NgbModal) {

}

To Open:

this.modalReference = this.modalService.open("ModelID"); //changeStatus  or viewRemark 

To Close:

this.modalReference.close("ModelID"); //changeStatus  or viewRemark 

https://ng-bootstrap.github.io/#/components/modal/examples#config