[No need any more] Use code to to open/close the modal

angular
1

EDIT: No need any more because ng2-bootstrap released modal.

For people who need use code to control when to open/close the modal now. Modal Component in ng2-bootstrap has not been achieved.

My walkaround way right now is adding hidden buttons. No need 3rd-party library. And it can give you full control.

This way can keep the Bootstrap style of the modal and the fade in/out animation, which works perfect.

Say I have a modal:

<div id="myModal" class="modal fade">
  You modal content goes here
</div>

Open modal

Add a hidden button:

<button id="openModalButton" [hidden]="true" data-toggle="modal" data-target="#myModal">Open modal</button>

Then use this code to “click” the button to open the modal:

document.getElementById("openModalButton").click();

Close modal

Similar, add a hidden button:

<button id="closeModalButton" [hidden]="true" data-dismiss="modal">Close modal</button>

Then use this code to “click” the button to close the modal:

document.getElementById('closeModalButton').click();