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

10,421

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();
Share:
10,421
Adrita Sharma
Author by

Adrita Sharma

Full-Stack Application Developer enthusiastic and passionate about coding. I am a self motivated person, love to write codes professionally, as well as a hobby. My main area of interests are ASP.NET Framework and Angular. I have extensive experience in designing and building highly scalable and stable web applications by implementing REST APIs and interactive UI. Ranked 1st as Angular Answerer in 2019 Technologies: Backend : ASP.NET( MVC | WebAPI | Core ), C#, Entity Framework, LINQ, NodeJS Frontend: Angular, TypeScript, JavaScript, HTML, CSS, Bootstrap DataBase: MS SQL Server, MySQL, FireBase Others: Kafka, GIT, SVN, JIRA, Confluence, Swagger, HighChart and Google Chart

Updated on June 14, 2022

Comments

  • Adrita Sharma
    Adrita Sharma almost 2 years

    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?

    • Chandru
      Chandru over 6 years
      modalService.close() will not work instead use this.activeModal.dismiss()
  • Adrita Sharma
    Adrita Sharma over 6 years
    I am getting this error : Error: No provider for NgbActiveModal!
  • Adrita Sharma
    Adrita Sharma over 6 years
    I have added this import { NgbModal,NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; but it doesn't seem to help. Please suggest