I have a button, on the click of which I am opening a bootstrap modal pop-up. The modal pop-up contains some field with a submit button. I want to close the pop-up only when I am done saving the data. I can't use data-dismiss as it will close the pop-up right after user hits the button. Is there a way to close the pop-up through typescript?
expense.component.html
<div id="AddExpense" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Expense</h4>
</div>
<div class="modal-body">
<form id="form" (ngSubmit)="saveExpense();">
<div class="form-group">
<table class="table table-responsive" style="border:0">
<tr *ngFor="#column of columnInputs" style="height:20px;">
<td class="text-right" style="padding-top:10px;border:0">
<h4> {{column.name | case}}: </h4>
</td>
<td class="text-center" style="padding-top:10px;border:0">
<input *ngIf="column.name != 'status'" type="{{column.name == 'created_Date' ? 'date' : 'text'}}" name="{{columns.name}}" required [(ngModel)]="column.value" class="form-control" />
<select class="form-control" *ngIf="column.name == 'status'" [(ngModel)]="column.value" name="{{column.name}}" required>
<option value="status">--Select--</option>
<option value="1">Paid</option>
<option value="2">Unpaid</option>
</select>
</td>
</tr>
</table>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg"> Add Expense </button>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Save this answer. Show activity on this post. <! -- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" #myModalClose class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> ...
using this. closeBtn. nativeElement. click(); to trigger click event will close your modal.
You can close modal with the close button or close it programmatically from another component by using this. modalRef. hide() method.
If you want to prevent boostrap modal from closing by those actions, you need to change the value of backdrop and keyboard configuration. The default value of backdrop and keyboard is set to true . You can change the configuration in HTML or Javascript directly.
you can use the action on close button
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" #closeAddExpenseModal>×</button>
<h4 class="modal-title">Add Expense</h4>
</div>
and in your controller you can add this line after the action you use
this.closeAddExpenseModal.nativeElement.click();
you will need to add this imports to your controller
import { ViewChild, ElementRef} from '@angular/core';
you will need also to define closeAddExpenseModal
@ViewChild('closeAddExpenseModal') closeAddExpenseModal: ElementRef;
With your id="AddExpense", you can close the modal with the below code anywhere in your typescript.
document.getElementById('AddExpense').click();
// where you want to dismiss your modal
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With