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).

Tags:

Angular