Angular2: How to display data in html format in angular2 data binding?

Question

I have product data from database contains title, description... The description is in html format string, like this:

<b>Name:</b> iPhone 5;<br>
<b>Membery:</b> 8GB;<br>
<b>Condition:</b> Brand new;<br />

if supposed to be displayed like this:

Name: iPhone 5;

Memory: 8GB;

Condition: Brand new

But when I use data-binding in Angular2: {{product.description}}, it displays like pure text:

<b>Name:</b> iPhone 5; <br /><b>Memory:</b> 8GB;<br /><b>Condition:</b> Brand new;<br />

How should I display it correctly as html ? there is no html filter for the binding.

Answer 1

You can bind to innerHTML:

<div [innerHTML]="product.description"></div>