0

I am trying to render dynamic HTML into an angular component. The problem is the dynamic HTML Content may have angular expressions in it and I want it to be rendered also. I have tried DomSanitizer and Component Factory Methods (links below), but I couldn't get the job done. Basically I want angular to compile template code on the go.

@component ({
  template : `{{ htmlCodeWithAngularExperssion }}`
)}

export class SomeComponent {
  this.htmlCodeWithAngularExperssion = `Hello, I am {{ name }} !
                      and My Hobbies are : 
                      <span *ngFor="let hob of hobbies" >{{ hob }}</span>`;

  this.name = 'Sreenivas';
  this.hobbies = ['Video Games', 'Treckking'];

 }
}

  1. DomSanitizer Method : Angular 2: sanitizing HTML stripped some content with div id - this is bug or feature?

  2. Component Factory : Equivalent of $compile in Angular 2

Sreenivasa Rajiv
  • 11
  • 4
  • Have a look here: https://medium.com/front-end-hacking/dynamically-add-components-to-the-dom-with-angular-71b0cb535286 – Jacopo Sciampi Sep 14 '18 at 07:52
  • As far as I know it is not possible to do anymore, as the angular compiler does not ship with the build anymore to make the build size smaller. The templates are all precompiled. – tom van green Sep 14 '18 at 08:15
  • @JacopoSciampi, I have tried that. But I can only able to create component on the go, the template inside the dynamic component is pre-compiled and could not be changed – Sreenivasa Rajiv Sep 14 '18 at 10:58
  • @tomvangreen There is a solution to pre-compile it https://stackoverflow.com/questions/48028676/compile-dynamic-html-in-angular-4-5-something-similar-to-compile-in-angular-js. But it is not working – Sreenivasa Rajiv Sep 14 '18 at 11:00

0 Answers0