How to use Angular2 innerHTML expressions?

Question

I have:

<div [innerHtml]="myStr">

where:

this.myStr=='{{1+1}}'

I want it to display:

2

But it outputs:

{{1+1}}

In Angular1 $compile was used for this issue. What do we use in Angular2 to compile expressions?

http://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/37044960#37044960 — Günter Zöchbauer, Apr 12 '17 at 17:06
i tried that link but it does not evaluate expressions in a string. It just dynamically creates components which are already defined but not yet instantiated. — danday74, Apr 12 '17 at 17:09
'{{ 1+1 }}' is an extreme simplification of my use case but if I can get '{{ 1+1 }}' working then I think I'm all good. — danday74, Apr 12 '17 at 17:10

score 1 · Accepted Answer · answered Apr 12 '17 at 19:44

1

{{ }} (double brackets) signals angular to interpolate values on the View, or client, not in the component class. You just want to set the value of this.myStr like a normal string variable in javascript.

following your example, you would use

this.myStr = '' + (1 + 1);

or

this.myStr = (1 + 1).toString();

answered Apr 12 '17 at 19:44

Neil S

2,302
20
27

not really the answer i wanted but the best answer given so accepting it – danday74 Apr 28 '17 at 10:39

score 1 · Answer 2 · answered Apr 12 '17 at 19:46

1

You can use ES6 template strings:

this.myStr=`${1+1}`

https://developers.google.com/web/updates/2015/01/ES6-Template-Strings

answered Apr 12 '17 at 19:46

Dmitrij Kuba

949
9
14

How to use Angular2 innerHTML expressions?

2 Answers2