Display HTML special characters in Angular 2 bindings?

Question

I have a normal binding like this {{foo}} and it displays foo\'s value as text in the HTML. The text that comes from the server is \"R&D\"

Answer 1

If you don't want to use [innerHTML], you can use unicode string characters (if you're using unicode strings in your project).

For the '&' symbol, that would be U+0026:

<div>{{"R\u0026D"}}</div>

Answer 2

{{}} is for string binding.

Use attribute binding to innerHTML instead to get these characters displayed correctly.

<div [innerHTML]="foo">

See https://stackoverflow.com/a/41089093/217408 for more details.

Answer 3

Base on accepted answer, I made an sample used

I shared for whom concern.

TS file
    export class AppComponent  {
      cubicSymbol = 'm²';
    }
HTML file
    <h2>Symbol: <span [innerHTML]="cubicSymbol"></span></h2>

https://stackblitz.com/edit/angular-display-symbols

Answer 4

You can use the innerHTML like this:

 <span [innerHTML]= "foo"></span>

It will decode properly

Answer 5

While innerHTML will work, it will break the line and div will be displayed in the new line (if div is what you prefer to use). Use outerHTML instead. It will add the value of foo at the same place where you use it.

<div [outerHTML]="foo"> </div>

With innerHTML, span is a better option.

Answer 6

You can also try the binding like this {{"\u0026"}}