Display HTML special characters in Angular 2 bindings?

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

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