Render html string within a template using interpolation?

Question

Using Angular 4.3.0

Say I have a string like this that is a property of a component.

<p>test#2 bla bla</p><p>test1234 56</p><p>test test</p>

So, Im following along with the docs,
https://angular.io/guide/template-syntax#!#property-binding-or-interpolation-

This does not work:
What am I doing wrong?

<div class="panel-group">
    <div class="panel panel-default" *ngFor="let b of BlogPostList">
        <div class="panel-heading">{{b.Title}}</div>
        <div class="panel-body">
            <span style="text-align:left">Created:{{b.DateCreated | date: 'MM/dd/yyyy'}}</span><span style="text-align:right">Last updated{{b.DateUpdated | date: 'MM/dd/yyyy'}}</span>
            <br/>
            <div [innerHTML]="<b>test here</b>"></div>
        </div>
    </div>
</div>

error:

Unhandled Promise rejection: Template parse errors:
Parser Error: Unexpected token < at column 1 in [<b>test here</b>] in ...</span>
                <br/>
                <div [ERROR ->][innerHTML]="<b>test here</b>"></div>
            </div>
        </div>

penleychan · Accepted Answer · 2017-10-12 14:10:06Z

25

You need to pass your [innerHTML] as a string wrap it with single quotes, <div [innerHTML]="'<b>test here</b>'"></div>

answered Oct 12, 2017 at 14:10

penleychan

5,4971 gold badge20 silver badges29 bronze badges

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

3 Comments

Amar Singh Over a year ago

I assigned the [innerHTML] like this [innerHTML]="'{blog.description}'" . This is giiving a error. - Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in

penleychan Over a year ago

@YoYo, in your case it should be just [innerHTML]="blog.description}" give that a try.

Koustav Over a year ago

omeralper · Accepted Answer · 2017-10-12 14:09:36Z

4

You shoud write the parameter as a string.

 <div [innerHTML]="'test here'"></div>

answered Oct 12, 2017 at 14:09

omeralper

10.2k3 gold badges21 silver badges29 bronze badges

Comments

Kristjan Johanson · Accepted Answer · 2022-11-29 13:46:15Z

1

Or if u want to use the parameter:

<div [innerHTML]="test.message"></div>

answered Nov 29, 2022 at 13:46

Kristjan Johanson

212 bronze badges

Collectives™ on Stack Overflow

Render html string within a template using interpolation?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related