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

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