Angular(2/4) modalService.close() is not working

13.1k views Asked by At

This is my code:

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';`

    constructor(private http: Http, private route: ActivatedRoute,private router: Router, private modalService: NgbModal) { }

    editDocumentRow = function (documentId, modal) {
        this.http.get(ConstantComponent.url + '/documentmanagerapi/Get/' + documentId).map((res: Response) => res.json()).subscribe(data => {
        this.documentsRowDetails = data
        this.modalService.open(modal)
        this.modalService.close() // not working
    })
  }

I am trying to use this.modalService.close() in a different function. But it's not even working in the same function where this.modalService.open(modal) is working perfectly.

I am getting this error: this.modalService.close is not a function

Any suggestion what went wrong here?

2

There are 2 answers

0
Sachila Ranawaka On BEST ANSWER

you can get the reference of the model open as the promise and close it.

editDocumentRow = function (documentId, modal) {
  this.http
    .get(ConstantComponent.url + "/documentmanagerapi/Get/" + documentId)
    .map((res: Response) => res.json())
    .subscribe((data) => {
      this.documentsRowDetails = data;
      this.modalService.open(modal);
      this.modalReference = this.modalService.open(modal);
      this.modalReference.result.then(
        (result) => {
          this.closeResult = `Closed with: ${result}`;
        },
        (reason) => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
    });
};

Now you can close the model

this.modalReference.close();
2
Chandru On

Open the modal :

constructor(
    private modalService: NgbModal
) { }

this.modalService.open()

Close Activate Modal :

constructor(
    public activeModal: NgbActiveModal
) { }

editDocumentRow = function (documentId, modal) {
    this.activeModal.dismiss();
})