Final host component

host.component.ts

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'host',
  templateUrl: './host.component.html',
  styleUrls: [ './host.component.css' ],
  entryComponents: [DynamicComponent]
})
export class AppComponent  {

  name = 'Dynamic';
  dynamicComponents = [];

  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  get hasDynamicComponents() {
    return this.container.length > 0;
  }

  constructor (private resolver: ComponentFactoryResolver) {

  }

  addComponent() {
   let factory = this.resolver.resolveComponentFactory(DynamicComponent);
   let inputs = { name: this.name };
   let component = factory.create(null);
   Object.keys(inputs).map(input => {
     component.instance[input] = inputs[input];
   });
   this.dynamicComponents.push(component);
   this.container.insert(component.hostView);
  }

  removeComponent() {
    this.dynamicComponents.pop().destroy();
  }

  clearComponents() {
    for(let component of this.dynamicComponents) {
      component.destroy();
    }
    this.dynamicComponents = [];
  }

}