Search code examples
angularbootstrap-modalviewchild

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


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?


Solution

  • 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();