ngBootstrap Modal is not showing unless after second click

Question

I have created a modal component called ImportCardModalComponent. This component must be opened if the login is failed. like follows:

this.authSerivce.logInRegular(this.model).then(result => {
      console.log(result);
    }, error => {
      var importModal = this.modalService.open(ImportCardModalComponent);

    });

The issue is that the dialog doesn't appear unless I click the button on screen twice and fire the service two times. The first time I click the button, DOM elements are added successfully but without css class in <ngb-modal-backdrop> and <ngb-modal-window>. As shown below. The second time I click on the button, the classes are showing correctly. As show below:

The modal MUST have class ="modal-backdrop fade show" in backdrop element. As well as class="modal fade show d-block" in window element.

I tried to use the modalService with NgbModalOptions backdropClass and windowClass without any success to work from first time.

If I move the open modal service outside the reject callback, it works fine.

Any Help is much appreciated.

Answer 1

One way is to manually trigger change detection after modal service call.

Get the reference of ApplicationRef

constructor(private appRef: ApplicationRef,...){} 

and then invoke change detection:

this.authSerivce.logInRegular(this.model).then(result => {
      console.log(result);
    }, error => {
      var importModal = this.modalService.open(ImportCardModalComponent);
      this.appRef.tick();
    });