title: Create dynamic component (ComponentFactoryResolver) with dynamic template
body: <p>I want to dynamically create a component with a dynamic template, so that interpolations of this template will resolve in the context of the dynamic component.</p>
  
  <p>I know that I can use this code to create a dynamic component (which must be mentioned in entryComponents on the module):</p>
  
  <p>My static component:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'html-type',
    template: `&lt;ng-template #htmlcontrolcomponent&gt;&lt;/ng-template&gt;`
  })
  export class HtmlTypeComponent implements AfterViewInit{
  
    @ViewChild('htmlcontrolcomponent', { read: ViewContainerRef }) entry: ViewContainerRef;
    constructor(private resolver: ComponentFactoryResolver) {
      super();
     }
  
    ngAfterViewInit() {
      this.createComponent("&lt;div&gt;{{contextvar}}&lt;/div&gt;");
    }
  
    createComponent(template) {
      this.entry.clear();
      const factory = this.resolver.resolveComponentFactory(HtmlControlComponent);
      const componentRef = this.entry.createComponent(factory);
      componentRef.instance.template = template;       // this doesn't work, is there a way to do it?
    }
  </code></pre>
  
  <p>Component that should be dynamically added:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component} from '@angular/core';
  
  @Component({
    selector: 'html-control',
    template: '',
  })
  export class HtmlControlComponent {
     contextvar: string = "This is my current context";
  }
  
  </code></pre>
  
  <p>Is there a way to reassign the template of a dynamically created component?</p>
  
  <p>What I wanted to achieve: The template of the dynamic component should be dynamic (entered by user and sanitized)</p>