2

I'm trying to load HTML from my server and insert it somewhere in my angular app. It works well with static HTML, but if I want to use interpolation or components in this HTML via [innerHMTL] angular doesn't compile this code automatically.

So for example:

<div [innerHTML]="'<p>{{\'test123\'}}</p><button (click)=\"test()\">test</button><hello-world-cmp></hello-world-cmp>'">

Should result in a paragraph without the curly brackets with the text test123, and a button with a actual click event triggering the method attached in the component TS file. Further more hello-world-cmp should be rendered as well.

I thought a third party module like ng-dynamic could do the trick. But it seems this requires JIT which is no longer usable for production builds. Is there any way of achieving this type of functionality?

enf0rcer
  • 545
  • 2
  • 11
  • Possible duplicate of [Equivalent of $compile in Angular 2](https://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2) – ConnorsFan Oct 15 '18 at 20:18
  • 1
    See [this article](https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e) for more details and explanations. – ConnorsFan Oct 15 '18 at 20:20
  • When you AOT compile your application, the compiler is dropped out of the game. You'll need to include `Compiler` in your AOT build. Have a look at @ConnorsFan article for more info. – Huske Oct 15 '18 at 20:36
  • Thanks guys, I think the article is exactly what I need! Let's hope its still up to date (: – enf0rcer Oct 15 '18 at 20:40
  • @ConnorsFan article no longer active – BooBailey Jan 24 '22 at 23:08

0 Answers0