Merge branch 'GrzegorzTokarz-master'

Author: Maxime Lafarie

src/app/demo/fake/fake.component.html

@@ -1,2 +1,3 @@
-<h1>Hello</h1>
-<p>I'm a component !</p>
+<h1>Hello {{ name }}</h1>
+<p>I'm a component !</p>
+<p>Just to say, "Jack" is a templte binding value!</p>

src/app/demo/fake/fake.component.ts

@@ -7,6 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FakeComponent implements OnInit {
 
+  public name = 'Jack';
+
   constructor() {
   }
 

src/app/demo/main/main.component.html

@@ -1,5 +1,5 @@
 <ng-template #tpl>
-    <h1>Hello</h1>
+    <h1>Hello {{ name }}</h1>
     <p>I'm TemplateRef content !</p>
 </ng-template>
 

src/app/demo/main/main.component.ts

@@ -11,10 +11,11 @@ import { FakeComponent } from '../fake/fake.component';
   styleUrls: ['./main.component.scss']
 })
 export class MainComponent implements AfterViewInit {
-  version = VERSION.full;
+  public version = VERSION.full;
+  public name = 'Bobby';
 
   // tslint:disable:max-line-length
-  sampleText: string[] = [
+  public sampleText: string[] = [
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper neque ac ullamcorper scelerisque. Proin molestie erat sapien, ac dapibus tortor placerat a. Vivamus quis tempor mauris. Ut porta ultricies nisi in eleifend. In magna nisi, tempor pharetra consequat in, sagittis id augue. Aliquam eu lectus id mi vulputate convallis. Nam facilisis nisl quis urna gravida tempus.',
     'Nulla nulla metus, posuere nec magna vitae, volutpat fermentum turpis. Cras blandit orci adipiscing est volutpat euismod. Mauris condimentum in urna in malesuada. Sed adipiscing tellus accumsan commodo fermentum. Duis augue nisi, euismod eget faucibus sed, luctus sit amet libero. Ut rutrum diam vel tellus luctus varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed leo mauris. Etiam nec aliquam lacus. Suspendisse ac nulla libero. In consectetur elementum urna, at dignissim nulla convallis congue. Nulla ligula mauris, imperdiet id ultricies eget, vulputate vel neque. Praesent porta elit eu elit feugiat lobortis. Sed nec ullamcorper neque, lacinia consequat sem. Aenean id tellus at quam pellentesque molestie. Vivamus vitae pharetra magna, sit amet elementum nulla.',
     'Sed ut purus congue odio euismod blandit at ac odio. Nunc rhoncus ut arcu sed vestibulum. Duis lobortis aliquam mollis. Nam elementum rhoncus sem, at aliquet mauris semper posuere. Quisque tortor elit, fringilla ut hendrerit nec, tristique nec arcu. Aenean lacus turpis, fermentum ullamcorper vulputate eu, pulvinar eu mi. Donec in ligula sollicitudin sapien aliquet euismod. Vivamus vulputate libero in enim auctor iaculis vel sit amet felis. Vestibulum feugiat lectus vel est posuere tristique.',

src/ngx-smart-modal/src/components/ngx-smart-modal.component.ts

@@ -1,19 +1,24 @@
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
-  Input,
-  Output,
-  OnInit,
-  OnDestroy,
-  Renderer2,
+  AfterViewInit,
+  ChangeDetectorRef,
   Component,
+  ComponentFactory,
+  ComponentFactoryResolver,
+  ElementRef,
   EventEmitter,
   HostListener,
-  ChangeDetectorRef,
-  ViewChildren,
-  ElementRef,
-  QueryList,
   Inject,
-  PLATFORM_ID
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  PLATFORM_ID,
+  QueryList,
+  Renderer2,
+  Type,
+  ViewChildren,
+  ViewContainerRef
 } from '@angular/core';
 
 import { NgxSmartModalConfig } from '../config/ngx-smart-modal.config';
@@ -33,7 +38,9 @@ import { NgxSmartModalConfig } from '../config/ngx-smart-modal.config';
            [attr.aria-describedby]="ariaDescribedBy">
         <div class="nsm-content" #nsmContent>
           <div class="nsm-body">
+            <ng-template #dynamicContent></ng-template>
             <ng-content></ng-content>
+
           </div>
           <button type="button" *ngIf="closable" (click)="close()" aria-label="Close" class="nsm-dialog-btn-close">
             <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512"
@@ -53,7 +60,7 @@ import { NgxSmartModalConfig } from '../config/ngx-smart-modal.config';
     </div>
   `
 })
-export class NgxSmartModalComponent implements OnInit, OnDestroy {
+export class NgxSmartModalComponent implements OnInit, OnDestroy, AfterViewInit {
   @Input() public closable: boolean = true;
   @Input() public escapable: boolean = true;
   @Input() public dismissable: boolean = true;
@@ -82,6 +89,7 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy {
   @Output() public onDataAdded: EventEmitter<any> = new EventEmitter();
   @Output() public onDataRemoved: EventEmitter<any> = new EventEmitter();
 
+  public contentComponent: Type<Component>;
   public layerPosition: number = 1041;
   public overlayVisible: boolean = false;
   public openedClass: boolean = false;
@@ -93,23 +101,35 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy {
   @ViewChildren('nsmContent') private nsmContent: QueryList<ElementRef>;
   @ViewChildren('nsmDialog') public nsmDialog: QueryList<ElementRef>;
   @ViewChildren('nsmOverlay') private nsmOverlay: QueryList<ElementRef>;
+  @ViewChildren('dynamicContent', { read: ViewContainerRef }) dynamicContentContainer: QueryList<ViewContainerRef>;
 
   constructor(
     private _renderer: Renderer2,
     private _changeDetectorRef: ChangeDetectorRef,
+    private componentFactoryResolver: ComponentFactoryResolver,
     @Inject(DOCUMENT) private _document: any,
-    @Inject(PLATFORM_ID) private _platformId: any
+    @Inject(PLATFORM_ID) private _platformId: any,
   ) { }
 
-  public ngOnInit() {
+  public ngOnInit(): void {
     if (!this.identifier || !this.identifier.length) {
       throw new Error('identifier field isn’t set. Please set one before calling <ngx-smart-modal> in a template.');
     }
 
     this._sendEvent('create');
   }
 
-  public ngOnDestroy() {
+  public ngAfterViewInit(): void {
+    if (this.contentComponent) {
+      const factory = this.componentFactoryResolver.resolveComponentFactory(this.contentComponent);
+      this.createDynamicContent(this.dynamicContentContainer, factory);
+      this.dynamicContentContainer.changes.subscribe((contentViewContainers: QueryList<ViewContainerRef>) => {
+        this.createDynamicContent(contentViewContainers, factory);
+      });
+    }
+  }
+
+  public ngOnDestroy(): void {
     this._sendEvent('delete');
   }
 
@@ -329,7 +349,7 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy {
     };
 
     const event = new CustomEvent(NgxSmartModalConfig.prefixEvent + name, { detail: data });
-    
+
     return window.dispatchEvent(event);
   }
 
@@ -339,4 +359,15 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy {
   private get isBrowser(): boolean {
     return isPlatformBrowser(this._platformId);
   }
+
+  /**
+   * Creates content inside provided ViewContainerRef
+   */
+  private createDynamicContent(changes: QueryList<ViewContainerRef>, factory: ComponentFactory<Component>): void {
+    changes.forEach((viewContainerRef: ViewContainerRef) => {
+      viewContainerRef.clear();
+      viewContainerRef.createComponent(factory);
+      this.markForCheck();
+    });
+  }
 }

src/ngx-smart-modal/src/services/ngx-smart-modal.service.ts

@@ -27,8 +27,9 @@ export class NgxSmartModalService {
     private _componentFactoryResolver: ComponentFactoryResolver,
     private _appRef: ApplicationRef,
     private _injector: Injector,
-    @Inject(DOCUMENT) private _document: any,
     private _modalStack: NgxSmartModalStackService,
+    private applicationRef: ApplicationRef,
+    @Inject(DOCUMENT) private _document: any,
     @Inject(PLATFORM_ID) private _platformId: any
   ) {
     this._addEvents();
@@ -235,6 +236,10 @@ export class NgxSmartModalService {
 
       const componentRef = componentFactory.create(this._injector, ngContent);
 
+      if (content instanceof Type) {
+        componentRef.instance.contentComponent = content;
+      }
+
       componentRef.instance.identifier = id;
       componentRef.instance.createFrom = 'service';
 
@@ -421,22 +426,19 @@ export class NgxSmartModalService {
    * Resolve content according to the types
    * @param content The modal content ( string, templateRef or Component )
    */
-  private _resolveNgContent<T>(content: Content<T>) {
+  private _resolveNgContent<T>(content: Content<T>): any[][] | Text[][] {
     if (typeof content === 'string') {
       const element = this._document.createTextNode(content);
       return [[element]];
     }
 
     if (content instanceof TemplateRef) {
       const viewRef = content.createEmbeddedView(null as any);
-
+      this.applicationRef.attachView(viewRef);
       return [viewRef.rootNodes];
     }
 
-    const factory = this._componentFactoryResolver.resolveComponentFactory(content);
-    const componentRef = factory.create(this._injector);
-
-    return [[componentRef.location.nativeElement], [this._document.createTextNode('')]];
+    return [];
   }
 
   /**