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

Answer 1

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

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