12

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>
Aravind
  • 40,391
  • 16
  • 91
  • 110
user728630
  • 2,025
  • 5
  • 22
  • 35
  • I think you'd be better off with an angular2 implementation of a modal. Have a look at this: https://github.com/pleerock/ng2-modal – j2L4e Aug 20 '16 at 14:57
  • Possible duplicate of [ng2-bootstrap show/hide modal as child component](https://stackoverflow.com/questions/42735858/ng2-bootstrap-show-hide-modal-as-child-component) – Aravind Aug 27 '17 at 08:30

4 Answers4

18

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;
3alaa baiomy
  • 346
  • 5
  • 9
  • 2
    I believe this should be the accepted answer as it demonstrates the solution the OP is seeking. Plus it is in my opinion the least invasive solution to this problem (i.e. it does not require mixing Typescript and Javascript). – Josh Stark Jan 20 '18 at 11:06
  • 1
    For reference, if you wish to follow other, then below link may help full to you. https://stackblitz.com/edit/angular-close-bootstrap-modal?file=src/app/app.component.html – Kodali444 Apr 26 '20 at 22:15
  • Thanks @Rao it works. And also thanks for example you shared. – Kishor T Jun 06 '20 at 14:15
  • @JoshStark any idea how to do this if the Close button is in one component and the modal is in another component? – Zoran777 Nov 23 '21 at 10:39
  • This doesn't work for me. Hitting the close button without any controller logic doesn't close the modal, so it's useless to simulate a click if that click doesn't work. – AlxVallejo Feb 18 '23 at 01:48
1

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

Pleasure
  • 279
  • 2
  • 6
  • 19
0

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');}
juagicre
  • 1,065
  • 30
  • 42
TANISHQ CHOPRA
  • 1
-3

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

Marco Castano
  • 1,114
  • 1
  • 10
  • 25