gistfile1.txt

import { Component,TemplateRef, AfterContentInit, OnInit, ViewChild,ViewContainerRef, ComponentFactoryResolver, ComponentRef } from '@angular/core';
import { AuthFormComponent } from './auth-form/auth-form.component';

import { User } from './auth-form/auth-form.interface';

@Component({
  selector: 'todd-root',
  template: `
    <div class="auth">
      <button (click)="destroyComponent()">destroy</button>
      <button (click)="moveComponent()">move</button>
      <div #entry></div>
      <ng-template #tpl></ng-template>
    </div>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterContentInit {
  component: ComponentRef<AuthFormComponent>;
  @ViewChild('entry',{'read':ViewContainerRef}) entry: ViewContainerRef;
@ViewChild('tpl') tpl:TemplateRef<any>;
  constructor(private resolver: ComponentFactoryResolver){}
  ngOnInit(){}
  ngAfterContentInit() {
    const formAuthFactory = this.resolver.resolveComponentFactory(AuthFormComponent);
this.entry.createComponent(formAuthFactory);
    this.component = this.entry.createComponent(formAuthFactory, 0);
    this.component.instance.title = 'Pippo';
    this.component.instance.submitted.subscribe(this.loginUser);
  }
  loginUser(user: User) {
    console.log('Login', user);
  }
  destroyComponent(){
    console.log('Login',this.component);
    this.component.destroy();
  }
  moveComponent(){
    console.log('Login',this.component);
    this.entry.move(this.component.hostView, 1);
  }
}