title: Angular 5 adding html content dynamically
body: <p>I have following angular to add dynamically loaded content:</p>
  
  <p><strong>main.html</strong></p>
  
  <pre><code>&lt;div class="top"&gt;
     &lt;ng-template #main&gt;&lt;/ng-template&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>main.ts</strong></p>
  
  <pre><code>import { Component, ViewChild, ComponentFactoryResolver, ViewContainerRef  } from '@angular/core';
  
  @Component({
      selector: 'page-main_page',
      templateUrl: 'main_page.html'
  })
  export class main_page {        
      @ViewChild('main', { read: ViewContainerRef }) entry: ViewContainerRef;
      data: any;
  
  constructor(public resolver: ComponentFactoryResolver){ 
  
  };      
  
      ngOnInit(){ 
          this.getDynamicREST().then((res)=&gt;{
              this.data = res; //Where it is a html markup from php server: &lt;div class="sample"&gt; Example &lt;/div&gt;
  
              const factory = this.resolver.resolveComponentFactory(this.data);
              this.entry.createComponent(factory);
  
          })
      };
  
  }
  </code></pre>
  
  <p>In the <code>getDynamicRest()</code>, I am getting a html markup from php server such as :</p>
  
  <pre><code> &lt;div class="sample"&gt; Example &lt;/div&gt;
  </code></pre>
  
  <p>However I am getting an error <code>"Error: No component factory found for  &lt;div class="sample"&gt; Example &lt;/div&gt;"</code></p>
  
  <p>Any suggestions would be much appreciated.</p>