CODEWITHSUNDEEP
angular
supriya suresh g
supriya suresh g

Reputation: 385

How to close modal popup window on click of submit button in angular (without using data-dismiss modal of bootstrap code)?

How do I close Modal Popup on form submit?

enter image description here

Upvotes: 0

Views: 11200

Answers (2)

Suhag Lapani
Suhag Lapani

Reputation: 695

import { Component, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

@Component({
  selector: 'demo-modal-service-static',
  template: `<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is a modal.
  </div>
</ng-template>`
})
export class DemoModalServiceStaticComponent {
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
}

use hide() method

Upvotes: 0

Lucifer
Lucifer

Reputation: 842

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.

Upvotes: 2

Related Questions