fix(modal): cmpt based content was not scrollable (#3286)

In `5.0.0` we introduced the bootstrap scrollable content feature.
This behaviour appears to be broken with modal that have content generated
from a component. Overall styling is wrong, resulting in a broken modal
not scrollable.

The fix is adding some extra styling added via a CSS classname
`component-host-scrollable`, in order to force the component
host to fit inside the parent `.model-content` flex display.

A complete different, and non-backward compatible fix will be provided in the next major release.

Fixes #3281

src/modal/modal-stack.ts

@@ -16,6 +16,7 @@ import {ContentRef} from '../util/popup';
 import {ScrollBar} from '../util/scrollbar';
 import {isDefined, isString} from '../util/util';
 import {NgbModalBackdrop} from './modal-backdrop';
+import {NgbModalOptions} from './modal-config';
 import {NgbActiveModal, NgbModalRef} from './modal-ref';
 import {NgbModalWindow} from './modal-window';
 
@@ -61,7 +62,8 @@ export class NgbModalStack {
     }
 
     const activeModal = new NgbActiveModal();
-    const contentRef = this._getContentRef(moduleCFR, options.injector || contentInjector, content, activeModal);
+    const contentRef =
+        this._getContentRef(moduleCFR, options.injector || contentInjector, content, activeModal, options);
 
     let backdropCmptRef: ComponentRef<NgbModalBackdrop> =
         options.backdrop !== false ? this._attachBackdrop(moduleCFR, containerEl) : null;
@@ -124,16 +126,16 @@ export class NgbModalStack {
   }
 
   private _getContentRef(
-      moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any,
-      activeModal: NgbActiveModal): ContentRef {
+      moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any, activeModal: NgbActiveModal,
+      options: NgbModalOptions): ContentRef {
     if (!content) {
       return new ContentRef([]);
     } else if (content instanceof TemplateRef) {
       return this._createFromTemplateRef(content, activeModal);
     } else if (isString(content)) {
       return this._createFromString(content);
     } else {
-      return this._createFromComponent(moduleCFR, contentInjector, content, activeModal);
+      return this._createFromComponent(moduleCFR, contentInjector, content, activeModal, options);
     }
   }
 
@@ -154,14 +156,20 @@ export class NgbModalStack {
   }
 
   private _createFromComponent(
-      moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any,
-      context: NgbActiveModal): ContentRef {
+      moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any, context: NgbActiveModal,
+      options: NgbModalOptions): ContentRef {
     const contentCmptFactory = moduleCFR.resolveComponentFactory(content);
     const modalContentInjector =
         Injector.create({providers: [{provide: NgbActiveModal, useValue: context}], parent: contentInjector});
     const componentRef = contentCmptFactory.create(modalContentInjector);
+    const componentNativeEl = componentRef.location.nativeElement;
+    if (options.scrollable) {
+      (componentNativeEl as HTMLElement).classList.add('component-host-scrollable');
+    }
     this._applicationRef.attachView(componentRef.hostView);
-    return new ContentRef([[componentRef.location.nativeElement]], componentRef.hostView, componentRef);
+    // FIXME: we should here get rid of the component nativeElement
+    // and use `[Array.from(componentNativeEl.childNodes)]` instead and remove the above CSS class.
+    return new ContentRef([[componentNativeEl]], componentRef.hostView, componentRef);
   }
 
   private _setAriaHidden(element: Element) {

src/modal/modal-window.ts

@@ -8,7 +8,8 @@ import {
   Input,
   OnDestroy,
   OnInit,
-  Output
+  Output,
+  ViewEncapsulation,
 } from '@angular/core';
 
 import {getFocusableBoundaryElements} from '../util/focus-trap';
@@ -30,7 +31,9 @@ import {ModalDismissReasons} from './modal-dismiss-reasons';
      (scrollable ? ' modal-dialog-scrollable' : '')" role="document">
         <div class="modal-content"><ng-content></ng-content></div>
     </div>
-    `
+    `,
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./modal.scss']
 })
 export class NgbModalWindow implements OnInit,
     AfterViewInit, OnDestroy {

src/modal/modal.scss

@@ -0,0 +1,7 @@
+ngb-modal-window {
+  .component-host-scrollable {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}

src/modal/modal.spec.ts

@@ -10,11 +10,9 @@ import {
   ViewChild
 } from '@angular/core';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-
 import {NgbModalConfig} from './modal-config';
 import {NgbActiveModal, NgbModal, NgbModalModule, NgbModalRef} from './modal.module';
 
-
 const NOOP = () => {};
 
 @Injectable()
@@ -815,6 +813,16 @@ describe('ngb-modal', () => {
         fixture.detectChanges();
         expect(fixture.nativeElement).not.toHaveModal();
       });
+
+      it('should add specific styling to content component host', () => {
+        const modalInstance = fixture.componentInstance.openCmpt(DestroyableCmpt, {scrollable: true});
+        fixture.detectChanges();
+        expect(document.querySelector('destroyable-cmpt')).toHaveCssClass('component-host-scrollable');
+
+        modalInstance.close();
+        fixture.detectChanges();
+        expect(fixture.nativeElement).not.toHaveModal();
+      });
     });
 
     describe('accessibility', () => {