How to open bootstrap popup model from typescript file
Question
I am working on Angular project, launching popup model when my function getting called. I found example on w3schools but this is has all html logic to open it.
I want to open it from ts file when openPopup() function getting called.
popup model html code from given link.
<body>
<div class="container">
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
</div>
</div>
</div>
</div>
</body>
This is button to open popup
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
How can I replace this code to ts file events?
1 answers
solution1
0 2020-08-03 07:14:57
create a variable like this. and remove toggle elements from modal.
// in ts
openModal: false;
//then in button click event:
<button (click)="openModalClick()"></button>
//in ts:
openModalClick(){
openModal=!openModal;
}
//in html
<div class="modal fade" id="myModal" *ngIf="openModal">
</div>
this will work in ts way, if you want to toggle with bootstrap, then select button with id and use java script.click().
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.