feat(theme): add capability append component to the layout top by its…

… factory (#253)

e2e/layout-dynamic.e2e-spec.ts

@@ -18,7 +18,7 @@ describe('nb-layout theme', () => {
     });
   });
 
-  it('should insert append into nb-layout', () => {
+  it('should append into nb-layout', () => {
 
     const button = element(by.css('#add-dynamic'));
 
@@ -38,6 +38,26 @@ describe('nb-layout theme', () => {
     });
   });
 
+  it('should append by factory into nb-layout', () => {
+
+    const button = element(by.css('#add-dynamic-by-factory'));
+
+    button.click().then(() => {
+      return browser.driver.wait(() => {
+        return element(by.css('nb-layout')).$$('*').first().getTagName().then(value => {
+          return value === 'nb-dynamic-to-add';
+        });
+      }, 10000);
+    });
+
+    element(by.css('nb-layout')).$$('*').first().getTagName().then(value => {
+      expect(value).toMatch('nb-dynamic-to-add');
+    });
+    element(by.css('nb-layout')).$$('*').get(1).getTagName().then(value => {
+      expect(value).toMatch('div');
+    });
+  });
+
   it('should clear dymamic nb-layout area', () => {
 
     const buttonAdd = element(by.css('#add-dynamic'));

src/app/layout-test/theme-dynamic-test.component.ts

@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component } from '@angular/core';
+import { Component, ComponentFactoryResolver } from '@angular/core';
 
 import { NbThemeService } from '@nebular/theme';
 
@@ -25,6 +25,7 @@ export class NbDynamicToAddComponent {}
       <nb-layout-header fixed>
         <a href="#" class="navbar-brand">Akveo</a>
         <button id="add-dynamic" (click)="addDynamicComponent()">Add Dynamic Copmonent</button>
+        <button id="add-dynamic-by-factory" (click)="addDynamicByFactory()">Add Dynamic By Factory</button>
         <button id="clear-dynamic" (click)="clearDynamicComponents()">Clear Dynamic Copmonents</button>
       </nb-layout-header>
 
@@ -49,12 +50,17 @@ export class NbDynamicToAddComponent {}
 `,
 })
 export class NbThemeDynamicTestComponent {
-  constructor(private themeService: NbThemeService) {}
+  constructor(private themeService: NbThemeService, private componentFactoryResolver: ComponentFactoryResolver) {}
 
   addDynamicComponent() {
     this.themeService.appendToLayoutTop(NbDynamicToAddComponent).subscribe(cRef => console.info(cRef));
   }
 
+  addDynamicByFactory() {
+    const factory = this.componentFactoryResolver.resolveComponentFactory(NbDynamicToAddComponent);
+    this.themeService.appendToLayoutTop(factory).subscribe(cRef => console.info(cRef));
+  }
+
   clearDynamicComponents() {
     this.themeService.clearLayoutTop().subscribe(res => console.info(res));
   }

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

@@ -6,7 +6,7 @@
 
 import {
   AfterViewInit, Component, ComponentFactoryResolver, ElementRef, HostBinding, HostListener, Input, OnDestroy,
-  Renderer2, ViewChild, ViewContainerRef, OnInit, Inject, PLATFORM_ID,
+  Renderer2, ViewChild, ViewContainerRef, OnInit, ComponentFactory, Inject, PLATFORM_ID,
 } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
@@ -344,9 +344,8 @@ export class NbLayoutComponent implements AfterViewInit, OnInit, OnDestroy {
       .pipe(
         takeWhile(() => this.alive),
       )
-      .subscribe((data: { component: any, listener: Subject<any> }) => {
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(data.component);
-        const componentRef = this.veryTopRef.createComponent(componentFactory);
+      .subscribe((data: { factory: ComponentFactory<any>, listener: Subject<any> }) => {
+        const componentRef = this.veryTopRef.createComponent(data.factory);
         data.listener.next(componentRef);
         data.listener.complete();
       });

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

@@ -5,8 +5,8 @@
  */
 
 import {
-  ComponentRef, Directive, ElementRef, HostListener,
-  Input, OnDestroy, OnInit, PLATFORM_ID, Inject,
+  ComponentFactoryResolver, ComponentRef, Directive, ElementRef, HostListener, Input, OnDestroy,
+  OnInit, PLATFORM_ID, Inject,
 } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { NbPositioningHelper } from './helpers/positioning.helper';
@@ -137,6 +137,7 @@ export class NbPopoverDirective implements OnInit, OnDestroy {
   constructor(
     private hostRef: ElementRef,
     private themeService: NbThemeService,
+    private componentFactoryResolver: ComponentFactoryResolver,
     @Inject(PLATFORM_ID) private platformId,
   ) {}
 
@@ -216,7 +217,8 @@ export class NbPopoverDirective implements OnInit, OnDestroy {
    * and {@link NbPopoverDirective#adjustment}.
    * */
   private renderPopover() {
-    this.themeService.appendToLayoutTop(NbPopoverComponent)
+    const factory = this.componentFactoryResolver.resolveComponentFactory(NbPopoverComponent);
+    this.themeService.appendToLayoutTop(factory)
       .pipe(takeWhile(() => this.alive))
       .subscribe((containerRef: ComponentRef<NbPopoverComponent>) => {
         this.containerRef = containerRef;

src/framework/theme/services/theme.service.ts

@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Inject, Injectable, Type } from '@angular/core';
+import { ComponentFactory, ComponentFactoryResolver, Inject, Injectable, Type } from '@angular/core';
 
 import { Observable } from 'rxjs/Observable';
 import { ReplaySubject } from 'rxjs/ReplaySubject';
@@ -41,6 +41,7 @@ export class NbThemeService {
     @Inject(nbThemeOptionsToken) protected options: any,
     private breakpointService: NbMediaBreakpointsService,
     private jsThemesRegistry: NbJSThemesRegistry,
+    private componentFactoryResolver: ComponentFactoryResolver,
   ) {
     if (options && options.name) {
       this.changeTheme(options.name);
@@ -56,9 +57,15 @@ export class NbThemeService {
     this.changeWindowWidth$.next(width);
   }
 
-  appendToLayoutTop<T>(component: Type<T>): Observable<any> {
+  appendToLayoutTop<T>(entity: Type<T> | ComponentFactory<T>): Observable<any> {
+    let factory = entity;
+
+    if (entity instanceof Type) {
+      factory = this.componentFactoryResolver.resolveComponentFactory(entity);
+    }
+
     const subject = new ReplaySubject(1);
-    this.appendToLayoutTop$.next({ component, listener: subject });
+    this.appendToLayoutTop$.next({ factory, listener: subject });
     return subject.asObservable();
   }