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>
Best Answer
you can use the action on close button
and in your controller you can add this line after the action you use
you will need to add this imports to your controller
you will need also to define closeAddExpenseModal