How can I convert strings of HTML into HTML in my template (Angular2/TypeScript)?

Question

I have this object in a dummy-data.ts file. Through a service I pull it successfully in to app.component.ts.

{name:"Object1", 
    prop1: {key:'value', key:'value'},
    password: "P@ssword1",
    htmlText:'<h4>This is THE demo text</h4><p>I want it to display as HTML</p>'
}

Currently app.component.ts looks like this, to start out simply:

@Component({
    selector: 'my-app',
    template: `<h1>{{title}}</h1>
        <p *ngFor="#plot of plots">
            {{plot.personalPanelText.transition}}
        </p>
`,
providers: [PlotService]  
})

The end result is strings instead of HTML. I want the HTML to be code, not text with HTML tags.

I've tried a couple ways and poked around the world wide nets and Angular2 docs, but couldn't find a solution.

Thanks in advance!

I can't see where you store your object therefore the code in my answer might not exactly fit your needs. Just add a comment or update your question with more details. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 28, 2016 at 17:08
In JavaScript, HTML can only occur as strings. As such, I don't understand what you mean by "The end result is strings instead of HTML. I want the HTML to be code, not text with HTML tags.". — Felix Kling
– Felix Kling, Commented Apr 28, 2016 at 17:11
Above solution is not loading inline html styles. Please check my answer here to load html with inline styles correctly. — Rajeev Kumar
– Rajeev Kumar, Commented Nov 27, 2020 at 20:15

Community · Accepted Answer · 2017-05-23 12:10:31Z

21

You can bind to innerHtml like:

<div [innerHtml]="someProp.htmlText"></div>

Angular does not instantiate any components where the selectors that match tags or attributes in HTML added this way nor will it resolve any bindings (like {{xx}})

See also How to bind raw html in Angular2

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Apr 28, 2016 at 17:08

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

4 Comments

Ketan Akbari Over a year ago

if i want to convert htmlstring to html in component. how can i ?

Günter Zöchbauer Over a year ago

@KetanAkbari Sorry, U don't understand your question. You can't add Angular components rhis way if that is your question.

Günter Zöchbauer Over a year ago

I don't know BsModalService. I'd suggest to create a new question.

Ketan Akbari Over a year ago

@GünterZöchbauer can we convert string to html in .ts file?

Collectives™ on Stack Overflow

How can I convert strings of HTML into HTML in my template (Angular2/TypeScript)?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related