Angular 5 adding html content dynamically

Question

I have following angular to add dynamically loaded content:

main.html

Answer 1

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: