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 test, then on the page, bold text would appear.

isn't it possible to use {{ value }} inside the ? Or maybe you can play around with *ngIf and create  if some statement is true or otherwise create  or whatever you want... — Dawid Zbiński
– Dawid Zbiński, Commented Dec 25, 2016 at 0:27

Stefan Svrkota · Accepted Answer · 2016-12-25 01:19:18Z

6

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>

edited Dec 25, 2016 at 1:19

answered Dec 25, 2016 at 0:29

Stefan Svrkota

50.8k10 gold badges100 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2: Expression containing markup

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related