import { 
  Directive,
  ElementRef,
  Input,
  ViewContainerRef,
  ComponentRef,
  Component,
  Renderer
} from '@angular/core';


@Component({
  selector: 'test',
  template: `<div>
  <p>test component</p>
  </div>` 
})
export class TestComponent {
  private hostprop = 'clicked it';

  clicked() {
    console.log(this.hostprop);
  }
}

@Component({
  selector: 'app',
  template: `<div>
  <templation [component]="testComponent" [template]="template1" ></templation>
  <templation [component]="testComponent" [template]="template2" ></templation>
  </div>` 
})
export class AppComponent {
  private testComponent = TestComponent;
  private template1 = `<p (click)="clicked()">the new template</p>`;
  private template2 = `<p (click)="clicked()">the newer template</p>`;
}