Angular Queries: How to enable and disable modal.

Introduction

here we have used the bootstrap modal and we are enabling the model when a button is clicked and then disabling the model when button is clicked.

enable the modal:

data-toggle="modal" data-target="#exportExcelModal"

disable modal

data-dismiss="modal"

modal id : exportExcelModal

Example Modal

  <div class="modal fade" id="exportExcelModal" role="dialog">
    <div class="modal-dialog modal-lg">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h2 class="modal-title">Alert</h2>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-sm-12">
              &#8594;Please note that only current page records will be exported due to server performance. Please
              select appropriate page and click download.
            </div>
          </div>

          <!-- <div class="row">
                    <div class="col-sm-12">
                      &#8594;Please note that Only displayed columns in this page will be downloaded. If you want to export with more columns, please filter any one Project using Project Filter and click download.
                    </div>
                  </div> -->

        </div>
        <div class="modal-footer">
          <div class="row">
            <div class="col-sm-5"></div>
            <div class="col-sm-2">
              <button type="button" class="btn btn-success" [disabled]="isPendingExcelExport" (click)="exportExcel();"
                data-dismiss="modal">Download</button>
            </div>
            <div class="col-sm-5"></div>
          </div>

        </div>
      </div>

    </div>
  </div>

enabling modal

above modal will be enabled when button is clicked.

   <div *ngIf="enabledExportExcel">
              <div class="excel-download">
                <img src="../../assets/images/download-excel-icon.png" width="40px" height="40px" class="ml-auto"
                  data-toggle="modal" data-target="#exportExcelModal">
                <span class="tooltiptext">Click to export</span>
              </div>
            </div>

Disabling modal

here we can see the data-dismiss="modal" is applied on the button and this button is inside the modal only.

<div class="modal-footer">
          <div class="row">
            <div class="col-sm-5"></div>
            <div class="col-sm-2">
              <button type="button" class="btn btn-success" [disabled]="isPendingExcelExport" (click)="exportExcel();"
                data-dismiss="modal">Download</button>
            </div>
            <div class="col-sm-5"></div>
          </div>

        </div>