38

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". I need this to display as "R&D". Any help?

Erik Philips
  • 53,428
  • 11
  • 128
  • 150
David
  • 1,620
  • 3
  • 20
  • 39
  • 1
    Possible duplicate of [angular 2 html binding](https://stackoverflow.com/questions/31548311/angular-2-html-binding) – Vega Aug 24 '17 at 16:03

8 Answers8

44

{{}} 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.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
29

For a little more fun and flexibility, you can create a pipe that parses HTML entities:

@Pipe({name: "decodeHtmlString"})
export class DecodeHtmlString implements PipeTransform {
    transform(value: string) {
        const tempElement = document.createElement("div")
        tempElement.innerHTML = value
        return tempElement.innerText
    }
}

{{foo | decodeHtmlString}}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
John Montgomery
  • 6,739
  • 9
  • 52
  • 68
  • 2
    I would suggest that this be a better answer in that I needed to parse some HTML entities on a "title" attribute for which innerHTML was not the answer. Creating a custom pipe and using that solved my issue. – Chris Coppenbarger Jan 19 '18 at 14:36
  • 1
    This works better for me, I needed to decode html to a input placeholder attribute. – joepa37 Jul 03 '18 at 23:41
  • 1
    using a hybrid of this, and the accepted answer... makes sense to set the innerHTML directly when possible, and the pipe in other cases. – ironic_ollins Aug 08 '18 at 18:18
  • after struggling with SafeHtml and bypassSecurityTrustHtml etc. etc. This is exaclty what i wanted! – Timar Ivo Batis Oct 15 '19 at 18:49
  • This also works on input value binding, which is what I needed `` – FirstVertex Oct 13 '20 at 16:03
  • Instead of using `innerText` should use `innerHTML` that way we decode special characters and keep existing html formatting – Imants Volkovs Jun 18 '21 at 09:14
  • @ImantsVolkovs That doesn't decode the special characters though, unless I'm misunderstanding what you're saying. If you set `innerHTML` to `R&D` and return `innerHTML`, you still get `R&D` back instead of `R&D`. – John Montgomery Jun 18 '21 at 18:48
  • Yeah, sorry. It was to resolve special characters from languages instead of amp symbol. Then yeah, it is better to use `innerText`. – Imants Volkovs Jun 19 '21 at 21:13
14

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>

dukeluke
  • 646
  • 7
  • 22
5

You can use the innerHTML like this:

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

It will decode properly

Ali Adravi
  • 21,707
  • 9
  • 87
  • 85
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.

FAISAL
  • 33,618
  • 10
  • 97
  • 105
4

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

Ibrahim Isa
  • 529
  • 3
  • 4
1

Base on accepted answer, I made an sample used

I shared for whom concern.

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

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

Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62
0

Instead of using [innerHTML] you can also replace accented characters with HexCode (from: Accented Characters and Ligatures in HTML and JavaScript)

For example "R&D" will be saved as "R\x26D"

This way you can use normal binding.

chezLugi
  • 1
  • 1