How can I close a modal in Angular 2?

Question

I want user click the Submit button and the modal close automatically.

If I add data-dismiss="modal" in the Submit <button>, it won't run submitComments().

I tried to do something like $('#myModal').modal('hide');, but not succeed.

So how can I close a modal in Angular 2? Thanks

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>  <div id="myModal" class="modal fade">      <div class="modal-dialog">         <div class="modal-content">             <div class="modal-body">                 <form (ngSubmit)="submitComments()">                     <div class="form-group row">                         <label class="form-control-label col-sm-2">Comments:</label>                         <div class="col-sm-10">                             <textarea class="form-control" rows="3"></textarea>                         </div>                     </div>                     <div class="form-group row">                         <div class="col-sm-offset-2 col-sm-10">                             <button type="submit" class="btn btn-default">Submit</button>                         </div>                     </div>                 </form>             </div>         </div>     </div> </div> 

.

submitComments() {     // I want to do something like $('#myModal').modal('hide'); here. } 

Answer 1

Using @ViewChild

add #closeBtn to the element with data-dismiss="modal"

<a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a> 

Component html

<div class="modal fade" id="yourModalId">   <div class="modal-dialog modal-lg">     <div class="modal-content">       <div class="modal-header">         <a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>       </div>       <div class="modal-body">       </div>       <div class="modal-footer">       </div>     </div>   </div> </div> 

using this.closeBtn.nativeElement.click(); to trigger click event will close your modal.

Component typescript

import {ViewChild, ElementRef} from '@angular/core'; @Component({     moduleId: ...,     selector: '.',     templateUrl: '.',     styleUrls: ['.'] }) export class yourClass {     @ViewChild('closeBtn') closeBtn: ElementRef;      yourFunction() {         //do something         ...         ...         //close your modal         this.closeModal();     }      //call this wherever you want to close modal     private closeModal(): void {         this.closeBtn.nativeElement.click();     } }