fix(modal): missing detectChanges (#4075)

Fixes #3960

src/modal/modal-stack.ts

@@ -90,7 +90,9 @@ export class NgbModalStack {
 
     if (backdropCmptRef && backdropCmptRef.instance) {
       this._applyBackdropOptions(backdropCmptRef.instance, options);
+      backdropCmptRef.changeDetectorRef.detectChanges();
     }
+    windowCmptRef.changeDetectorRef.detectChanges();
     return ngbModalRef;
   }
 

src/modal/modal-window.ts

@@ -1,6 +1,5 @@
 import {DOCUMENT} from '@angular/common';
 import {
-  AfterViewInit,
   Component,
   ElementRef,
   EventEmitter,
@@ -44,7 +43,7 @@ import {reflow} from '../util/util';
   styleUrls: ['./modal.scss']
 })
 export class NgbModalWindow implements OnInit,
-    AfterViewInit, OnDestroy {
+    OnDestroy {
   private _closed$ = new Subject<void>();
   private _elWithFocus: Element | null = null;  // element that is focused prior to modal opening
 
@@ -71,9 +70,10 @@ export class NgbModalWindow implements OnInit,
 
   dismiss(reason): void { this.dismissEvent.emit(reason); }
 
-  ngOnInit() { this._elWithFocus = this._document.activeElement; }
-
-  ngAfterViewInit() { this._show(); }
+  ngOnInit() {
+    this._elWithFocus = this._document.activeElement;
+    this._zone.onStable.asObservable().pipe(take(1)).subscribe(() => { this._show(); });
+  }
 
   ngOnDestroy() { this._disableEventHandling(); }
 

src/modal/modal.spec.ts

@@ -976,6 +976,10 @@ describe('ngb-modal', () => {
                component.detectChanges();
 
                const modalRef = component.componentInstance.open();
+
+               // Ensure that everything works fine after a reflow
+               document.body.getBoundingClientRect();
+
                let modalEl: HTMLElement | null = null;
 
                modalRef.shown.subscribe(() => {