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.

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>&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;

Best Answer

Related Solutions

Angular – How to close a modal in Angular 2

Component html

Component typescript

Angular – Close bootstrap modal using typescript in angular 2

Related Topic