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

Question

I have data about products from a database that contain a name, description ... The description is in a html-format string, for example:

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

if it is supposed to be displayed as follows:

Name: iPhone 5;

Memory: 8 GB;

Condition: New

But when I use data binding in Angular2: {{product.description}}, it displays as plain text:

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

How to display it correctly as html? there is no html filter for binding.

Answer 1

You can bind to innerHTML:

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