Angular 2: Expression containing markup

Question

I'm looking for a way to tell Angular to display a value inside an expression that contains markup, and actually use the HTML:

{{ value }}

let value = "<span>foobar</span>";

So, the value variable contains a string with markup, and I want to apply the markup so it is rendered in the page. So if value contained <b>test</b>, then on the page, bold text would appear.

Answer 1

Guess you are looking for innerHTML:

value: string = "<span>foobar</span>";

<div [innerHTML]="value">
</div>

The code above will be rendered to:

<div>
    <span>foobar</span>
</div>