ngBootstrap Modal is not showing unless after second click

user_3351642 0
Viewed 2069

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 classes are not defined The second time I click on the button, the classes are showing correctly. As show below: enter image description here

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.

ng-bootstrap bootstrap-modal angular css javascript
1 Answers

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();
    });
user_113239660
Related