Merge pull request #1 from GrzegorzTokarz/feature/dynamic-content

feature/dynamic-content: add possibility to render dynamic components

Author: GrzegorzTokarz

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

@@ -1,19 +1,23 @@
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
-  Input,
-  Output,
-  OnInit,
-  OnDestroy,
-  Renderer2,
+  AfterViewInit,
+  ChangeDetectorRef,
   Component,
+  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 +37,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 +59,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;
@@ -81,7 +87,7 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy {
   @Output() public onEscape: EventEmitter<any> = new EventEmitter();
   @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,12 +99,14 @@ 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 }) dynamicContent: QueryList<ViewContainerRef>;
 
   constructor(
     private _renderer: Renderer2,
     private _changeDetectorRef: ChangeDetectorRef,
     @Inject(DOCUMENT) private _document: any,
-    @Inject(PLATFORM_ID) private _platformId: any
+    @Inject(PLATFORM_ID) private _platformId: any,
+    private componentFactoryResolver: ComponentFactoryResolver
   ) { }
 
   public ngOnInit() {
@@ -109,6 +117,16 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy {
     this._sendEvent('create');
   }
 
+  public ngAfterViewInit(): void {
+    if (this.dynamicContent && this.contentComponent) {
+      const factory = this.componentFactoryResolver.resolveComponentFactory(this.contentComponent);
+      const viewContainerRef: ViewContainerRef = this.dynamicContent.first;
+      viewContainerRef.clear();
+      viewContainerRef.createComponent(factory);
+      this.markForCheck();
+    }
+  }
+
   public ngOnDestroy() {
     this._sendEvent('delete');
   }
@@ -329,7 +347,7 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy {
     };
 
     const event = new CustomEvent(NgxSmartModalConfig.prefixEvent + name, { detail: data });
-    
+
     return window.dispatchEvent(event);
   }
 

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

@@ -235,6 +235,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,7 +425,7 @@ 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]];
@@ -433,10 +437,7 @@ export class NgxSmartModalService {
       return [viewRef.rootNodes];
     }
 
-    const factory = this._componentFactoryResolver.resolveComponentFactory(content);
-    const componentRef = factory.create(this._injector);
-
-    return [[componentRef.location.nativeElement], [this._document.createTextNode('')]];
+    return [];
   }
 
   /**