Close bootstrap modal using typescript in angular 2
<p>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?</p>

<p>expense.component.html</p>

<pre><code>&lt;div id="AddExpense" class="modal fade" role="dialog"&gt;
        &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                    &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                    &lt;h4 class="modal-title"&gt;Add Expense&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                    &lt;form id="form" (ngSubmit)="saveExpense();"&gt;
                        &lt;div class="form-group"&gt;
                            &lt;table class="table table-responsive" style="border:0"&gt;
                                &lt;tr *ngFor="#column of columnInputs" style="height:20px;"&gt;
                                    &lt;td class="text-right" style="padding-top:10px;border:0"&gt;
                                        &lt;h4&gt; {{column.name | case}}: &lt;/h4&gt;
                                    &lt;/td&gt;
                                    &lt;td class="text-center" style="padding-top:10px;border:0"&gt;
                                        &lt;input *ngIf="column.name != 'status'" type="{{column.name == 'created_Date' ? 'date' : 'text'}}" name="{{columns.name}}" required [(ngModel)]="column.value" class="form-control" /&gt;
                                        &lt;select class="form-control" *ngIf="column.name == 'status'" [(ngModel)]="column.value" name="{{column.name}}" required&gt;
                                            &lt;option value="status"&gt;--Select--&lt;/option&gt;
                                            &lt;option value="1"&gt;Paid&lt;/option&gt;
                                            &lt;option value="2"&gt;Unpaid&lt;/option&gt;
                                        &lt;/select&gt;
                                    &lt;/td&gt;
                                &lt;/tr&gt;
                            &lt;/table&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group"&gt;
                            &lt;button type="submit" class="btn btn-primary btn-lg"&gt; Add Expense &lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/form&gt;
                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>