Modal not opened properly programmatically in angular

Question

I'm using ng-bootstrap modal

import { NgbModal, ModalDismissReasons } from "@ng-bootstrap/ng-bootstrap";

On button click it is opened properly

<button class="btn labelbtn accountbtn customnavbtn"(click)="demobutton(UploadModal)" type="button">   Open   </button> 


demobutton(UploadModal:any) {
   
    this.modalService
      .open(UploadModal, {
        windowClass: "modal",
        ariaLabelledBy: "modal-basic-title",
        backdrop: false,
      })
      .result.then(
        (result) => {},
        (reason) => {}
      );
   
  }   

but when i try to open through function it is not opening properly only some of the divs are visible content is not visible.

async open(files){
      this.modalService.dismissAll();
      setTimeout(() => {
        this.demobutton('UploadModal'); 
      }, 2000); 

Any solution Thanks

Answer 1

Try this:

function timeout(ms) {
     return new Promise(resolve => setTimeout(() => 
     {this.demobutton('UploadModal');}, ms));
}

async open(files){
     this.modalService.dismissAll();
     await timeout(2000);
}
  

Answer 2

See that when you have a button (I imagine you open a template) you write: demobutton(UploadModal). "UploadModal" is a "template", not a string. See the docs: "Content can be provided as a TemplateRef or a component type."

So you need "get" the template using ViewChild

@ViewChild('UploadModal') modal:TemplateRef<any>

//and use, see that you open "this.modal"
this.modalService
      .open(this.modal, {
        windowClass: "modal",
        ariaLabelledBy: "modal-basic-title",
        backdrop: false,
      }); 

Update demo: stackblitz