title: Angular2 Best way for dynamic component
body: <p>I would like to know what is the best way (performance) to create dynamic component.
  I tried both but I'm not able to determine which one I should use.</p>
  
  <p>With an ng-switch in my component.html container</p>
  
  <pre><code>@Component({
    selector: 'app-component-container',
    template: `&lt;div [ngSwitch]="typeComponent"&gt;
                &lt;app-component-one *ngSwitchCase="1" [value]="someValue"&gt;&lt;/app-component-one&gt;
                &lt;app-component-two *ngSwitchCase="2" [value]="someValue"&gt;&lt;/app-component-two&gt;
                &lt;app-component-three *ngSwitchCase="3" [value]="someValue"&gt;&lt;/app-component-three&gt;
                &lt;/div&gt;`
  })
  export class ContainerComponent implements OnInit {
    private typeComponent: number;
    private someValue: string;
  
    constructor() {
      this.typeComponent = 2;
      this.someValue = "Hello";
  
    }
  
    ngOnInit() {
  
    }
  }
  </code></pre>
  
  <p>or with a component builder in my component.ts container</p>
  
  <pre><code>@Component({
    selector: 'app-component-container',
    template: '&lt;div #container&gt;&lt;/div&gt;'
  })
  export class ContainerComponent implements OnInit {
    @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;
  
    private typeComponent: number;
  
    private someValue: string;
  
    constructor(private _resolver: ComponentFactoryResolver) {
      this.typeComponent = 2;
      this.someValue = "Hello";
    }
  
    ngOnInit() {
      let childComponent: ComponentRef&lt;any&gt; = null;
      switch (this.typeComponent) {
        case 1:
          childComponent = this.container.createComponent&lt;ChildComponentOne&gt;(this._resolver.resolveComponentFactory(ChildComponentOne));
          break;
        case 2:
          childComponent = this.container.createComponent&lt;ChildComponentTwo&gt;(this._resolver.resolveComponentFactory(ChildComponentTwo));
          break;
        case 3:
          childComponent = this.container.createComponent&lt;ChildComponentThree&gt;(this._resolver.resolveComponentFactory(ChildComponentThree));
          break;
      }
  
      if (childComponent != null) {
        childComponent.instance.value = this.someValue;
      }
    }
  }
  </code></pre>
  
  <p>This are simple exemple, in my application I have huge imbrication of dynamic component.</p>
  
  <p>Thank you in advance for your answer guys.</p>