15

I have my example: string; in my component.ts file. I can output this variable in two ways (at least that I know of):

I can do:

<p>{{ example }}</p>

and I can do:

<p [innerHTML]="example"></p>

Well, when I use the first way, my IDE (phpStorm) tells my that my var is unnecessary because I never used it. But when I use the second way, it says I'm using it.

Does it matter which method should I use?

Eliya Cohen
  • 10,716
  • 13
  • 59
  • 116
  • the first way could cause the user to see the literal string "{{ example }}" for a brief moment if the page loads before example is set. the second method is better for this reason. – bryan60 Jun 20 '16 at 21:33
  • Even when I use Angular 2? – Eliya Cohen Jun 20 '16 at 21:35
  • afaik, unless example is actual html, you should use the first way. innerHTML is for actual html markup – Rob Louie Jun 20 '16 at 21:36
  • Possible duplicate of [How to get angular2 \[innerHtml\] to work](https://stackoverflow.com/questions/41979458/how-to-get-angular2-innerhtml-to-work) – Cobus Kruger Jul 10 '18 at 13:30

2 Answers2

13

Per the Angular 2 docs: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding-or-interpolation-

There is no technical reason to prefer one form to the other. We lean toward readability, which tends to favor interpolation. We suggest establishing coding style rules and choosing the form that both conforms to the rules and feels most natural for the task at hand.

And, as far as being concerned about innerHTML having malicious scripts in it (another reason you might favor interpoliation):

Fortunately, Angular data binding is on alert for dangerous HTML. It sanitizes the values before displaying them.

So, really it's up to you. Angular team says they favor {{ example }} because it's easier to read, and I tend to agree with them, but seems like you can go either way.

Rob Louie
  • 2,462
  • 1
  • 19
  • 24
  • In IE Edge 41.16299.15.0 "null" displays when using innerHTML on a field that is not defined. It does not show if you use interpolation or innerText. – keza Dec 01 '17 at 01:13
  • @keza I'm having the same issue in IE11 and would like to know if anyone has found a solution. – HisDivineShadow May 01 '18 at 17:02
8

My IDE has the same limitation as yours and it's annoying. Be careful though, the two options you presented are not the same. If you want to render HTML markup (to add DOM elements to the page), use:

<p [innerHTML]="example"></p>

If you expect to output just strings, do not bind to this property. Either use interpolation:

<p>{{ example }}</p>

Or bind to the innerText:

<p [innerText]="example"></p>

To prove that they're different, in the Component, set:

example = '<h3>Am I big?</h3>'

Then in your template, have both divs:

<p [innerText]="example"></p>
<p [innerHTML]="example"></p>

You'll see that the paragraphs render differently :-)

BeetleJuice
  • 39,516
  • 19
  • 105
  • 165
  • 1
    This should be the accepted answer. NOTE: in case of [innerHTML], you have to use "encapsulation: ViewEncapsulation.None" in @Component, and that is the worst part! :-( – Sourangshu Biswas Apr 15 '19 at 17:24