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!

Answer 1

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