dynamic-component.ts

dynamic-component.ts

import { Component, ViewContainerRef, ComponentRef, ComponentFactoryResolver, ViewChild, Type, Input, Compiler } from '@angular/core';

// Helper component to add dynamic components
@Component({
  selector: 'tnp-component-injector',
  template: `<div></div>`
})
export class ComponentInjector {
  @Input() component: Type<Component>;
  @Input() props: Object = {};
  cachedComponent: Type<Component>;
  componentRef: ComponentRef<Component>;
  private isViewInitialized:boolean = false;

  constructor(private componentFactoryResolver: ComponentFactoryResolver, private _viewContainerRef: ViewContainerRef) {}

  updateComponent() {
    if(!this.isViewInitialized) {
      return;
    }

    if (this.cachedComponent !== this.component) {
      if(this.componentRef) {
        this.componentRef.destroy();
      }

      let factory = this.componentFactoryResolver.resolveComponentFactory(this.component);
      this.cachedComponent = this.component;
      this.componentRef = null;

      setTimeout( () => {
        this.componentRef = this._viewContainerRef.createComponent(factory);

        Object.assign(this.componentRef.instance, this.props);
      }, 0);
    }

    if (this.componentRef) {
      Object.assign(this.componentRef.instance, this.props);
    }
  }

  ngOnChanges() {
    this.updateComponent();
  }

  ngAfterViewInit() {
    this.isViewInitialized = true;
    this.updateComponent();
  }

  ngOnDestroy() {
    if(this.componentRef) {
      this.componentRef.destroy();
    }
  }
}

index.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ComponentInjector } from './component-injector';

@NgModule({
  declarations: [
    ComponentInjector
  ],
  imports: [
    BrowserModule,
  ],
  exports: [
    ComponentInjector
  ],
  entryComponents: []
})
export class ComponentInjectorModule {
  constructor() {}
}