Angular – How to close modal popup window on click of submit button in angular (without using data-dismiss modal of bootstrap code) angular How do I close Modal Popup on form submit? Best Answer If you are using ng-bootstrap to create modal, you can declare modalservice in constructor and close function will work. constructor(private modalService: NgbActiveModal){} public onClick(id: number): void{ this.modalService.close(); //Your code goes here } If you are following different logic for modal window. Please post some of you code so that any one give you better solution. Related SolutionsAngular – How to close a modal in Angular 2 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(); } } Angular – Close bootstrap modal using typescript in angular 2 you can use the action on close button <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" #closeAddExpenseModal>×</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; Related TopicR – iPhone Dev – Multi-View App lazy loadingAngular 2 ng-bootstrap close ModalJavascript – Angular bootstrap: how to close modal
Best Answer
If you are using ng-bootstrap to create modal, you can declare modalservice in constructor and close function will work.
If you are following different logic for modal window. Please post some of you code so that any one give you better solution.