fix(overlay): set context on component portals before first cd run (#…

…1395)

src/framework/theme/components/cdk/overlay/overlay-container.spec.ts

@@ -0,0 +1,58 @@
+import { Component, NgModule, OnInit, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NbComponentPortal, NbOverlayContainerComponent, NbOverlayModule } from '@nebular/theme';
+
+@Component({
+  template: `
+    <nb-overlay-container></nb-overlay-container>
+  `,
+})
+export class NbOverlayContainerTestComponent {
+  @ViewChild(NbOverlayContainerComponent) overlayContainer: NbOverlayContainerComponent;
+}
+
+@Component({
+  template: `{{ contextProperty }}`,
+})
+export class NbOverlayTestComponent implements OnInit {
+  contextProperty;
+
+  isFirstOnChangesCall = true;
+  contextPropertyValueOnFirstCdRun;
+  ngOnInit() {
+    if (this.isFirstOnChangesCall) {
+      this.contextPropertyValueOnFirstCdRun = this.contextProperty;
+      this.isFirstOnChangesCall = false;
+    }
+  }
+}
+
+// Has to define test module since there is no way to specify entry components
+// in 'TestBed.configureTestingModule'.
+@NgModule({
+  imports: [ NbOverlayModule.forRoot() ],
+  declarations: [ NbOverlayContainerTestComponent, NbOverlayTestComponent ],
+  entryComponents: [ NbOverlayTestComponent ],
+})
+export class NbOverlayTestModule {}
+
+describe('NbOverlayContainerComponent', () => {
+  let fixture: ComponentFixture<NbOverlayContainerTestComponent>;
+  let overlayContainer: NbOverlayContainerComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [ NbOverlayTestModule ] });
+
+    fixture = TestBed.createComponent(NbOverlayContainerTestComponent);
+    fixture.detectChanges();
+    overlayContainer = fixture.componentInstance.overlayContainer;
+  });
+
+  it('should set context before change detection run', () => {
+    const context = { contextProperty: 'contextProperty' };
+    const portal: NbComponentPortal<NbOverlayTestComponent> = new NbComponentPortal(NbOverlayTestComponent);
+    const portalRef = overlayContainer.attachComponentPortal(portal, context);
+
+    expect(portalRef.instance.contextPropertyValueOnFirstCdRun).toEqual(context.contextProperty);
+  });
+});

src/framework/theme/components/cdk/overlay/overlay-container.ts

@@ -72,9 +72,12 @@ export class NbOverlayContainerComponent {
     return !!this.content;
   }
 
-  attachComponentPortal<T>(portal: NbComponentPortal<T>): ComponentRef<T> {
+  attachComponentPortal<T>(portal: NbComponentPortal<T>, context?: Object): ComponentRef<T> {
     portal.injector = this.createChildInjector(portal.componentFactoryResolver);
     const componentRef = this.portalOutlet.attachComponentPortal(portal);
+    if (context) {
+      Object.assign(componentRef.instance, context);
+    }
     componentRef.changeDetectorRef.markForCheck();
     componentRef.changeDetectorRef.detectChanges();
     this.isAttached = true;

src/framework/theme/components/popover/popover.component.ts

@@ -73,8 +73,7 @@ export class NbPopoverComponent extends NbPositionedContainer implements NbRende
 
   protected attachComponent() {
     const portal = new NbComponentPortal(this.content, null, null, this.cfr);
-    const ref = this.overlayContainer.attachComponentPortal(portal);
-    Object.assign(ref.instance, this.context);
+    const ref = this.overlayContainer.attachComponentPortal(portal, this.context);
     ref.changeDetectorRef.detectChanges();
   }
 

src/framework/theme/components/window/window.component.ts

@@ -150,8 +150,7 @@ export class NbWindowComponent implements OnInit, AfterViewChecked, OnDestroy {
 
   protected attachComponent() {
     const portal = new NbComponentPortal(this.content as Type<any>, null, null, this.cfr);
-    const ref = this.overlayContainer.attachComponentPortal(portal);
-    Object.assign(ref.instance, this.context);
+    const ref = this.overlayContainer.attachComponentPortal(portal, this.context);
     ref.changeDetectorRef.detectChanges();
   }
 }