Angular 5 adding html content dynamically
The ComponentFactoryResolver
's resolveComponentFactory
method accepts an Angular Component.
In your case, you are injecting HTML into your template, not a component. To inject HTML, save it in a variable and use the DomSanitizer
to either sanitize it or bypass the security check:
export class main_page {
data: SafeHtml;
constructor(private sanitizer: DomSanitizer) {}
ngOnInit(){
this.getDynamicREST().then((res)=> {
this.data = this.sanitizer.sanitize(res);
/* OR */
this.data = this.sanitizer.bypassSecurityTrustHtml(res);
})
};
}
Then, in your template:
<div class="top">
<div [innerHtml]="data"></div>
</div>
There is a new library that does the job. It is called ngx-dynamic-hooks
. Link here.
With this one you don't have to disable AOT (as with ngx-dynamic-template
, link here).