1

I have an Angular 4 application that allows a user to create a letter from a template. The template consists of text with embedded placeholders and is stored in a database. The user loads an appropriate template and provides values (from a variety of UI controls) for the placeholder / fields.

The placeholders in this content are replaced by Angular expressions in the following format as the content is prepared:

{{this.model.property1}}

The resulting template content is then rendered as an array of paragraphs, and is loaded into a preview control like this:

<div *ngFor="let paragraph of letter.paragraphs">
    <p [innerHtml]="paragraph">
    </p>
</div>

I want Angular to compile the expressions in the content so that the model values are bound as if the expression was a part of an Angular template.

The problem is that the InnerHtml directive treats the expression as literal text and the expression is displayed in the view, rather than the value to which it resolves.

How can I inject these expressions dynamically into the template to get the result I want?

Paul Taylor
  • 5,651
  • 5
  • 44
  • 68
  • 1
    you might find [this article](https://hackernoon.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e) helpful – Max Koretskyi Jun 12 '17 at 17:13
  • You can create and compile a component at runtime like explained in https://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/37044960#37044960. Otherwise expressions are translated to JS when you build your Angular application. Adding expressions or anything else related to Angular to a components template won't make Angular to process it in any way. – Günter Zöchbauer Jun 12 '17 at 17:13

0 Answers0