CODEWITHSUNDEEP
angulartypescript
Rishi Bharadwaj
Rishi Bharadwaj

Reputation: 2076

Close bootstrap modal using typescript in angular 2

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">&times;</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>

Upvotes: 12

Views: 34769

Answers (4)

TANISHQ CHOPRA
TANISHQ CHOPRA

Reputation: 1

You can provide an id to the button and in the .ts file call it using getElementById selector and setAttribute of 'data-dismiss' to 'modal' and you can set this attribute after your API call or whatever functionality you wanna add.

Example:

close(){document.getElementById('abc').setAttribute('data-dismiss','modal');}

Upvotes: 0

Pleasure
Pleasure

Reputation: 319

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

Upvotes: 1

3alaa baiomy
3alaa baiomy

Reputation: 346

you can use the action on close button 

<div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" #closeAddExpenseModal>&times;</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;

Upvotes: 18

Marco Castano
Marco Castano

Reputation: 1154

I'm not sure what you really need to do but If you want to close modal with typescript you can just give an id to your html modal and call 'hide' method.

$('#newPostModal').modal('hide');

Sorry if this isn't what you want maybe if you can explain me better I can help you

Upvotes: -3

Related Questions