Angular 5 adding html content dynamically : <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>
