how cen i close modal from .ts file?


Topic: how cen i close modal from .ts file?

yaniv682 asked 5 years ago

i have this code how cen i hide modal from ts file? html

enter image description here


1001albertpadilla commented 5 years ago

In your modal's HTML -- button type="button" mdbBtn color="primary" class="waves-light btn-sm btn-default" aria-label="Close" (click)="closeModal()" mdbWavesEffect>Close

In your TS that opened the modal --

constructor(public modalRef: MDBModalRef) {}

closeModal() { this.modalRef.hide(); }


Bartosz Termena staff answered 5 years ago

Dear @yaniv682

Example below:

HTML

<button
  type="button"
  mdbBtn
  color="primary"
  class="relative waves-light"
  (click)="basicModal.show()"
  mdbWavesEffect
>
  Launch demo modal
</button>
​
<div
  mdbModal
  #basicModal="mdbModal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myBasicModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close pull-right"
          aria-label="Close"
          (click)="basicModal.hide()"
        >
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button
          type="button"
          mdbBtn
          color="secondary"
          class="waves-light"
          aria-label="Close"
          (click)="saveAddProduct()"
          mdbWavesEffect
        >
          Save changes
        </button>
      </div>
    </div>
  </div>
</div>
Collapse

TS

@ViewChild('basicModal', { static: true }) basicModal: ModalContainerComponent;
​
  saveAddProduct() {
    // do something
    this.basicModal.hide();
  }

Best Regards, Bartosz.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.5.0
  • Device: pc
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No