CODEWITHSUNDEEP
javascripttemplatestypescriptangularecmascript-6
McPhelpsius
McPhelpsius

Reputation: 253

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

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!

Upvotes: 7

Views: 29283

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657108

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

Upvotes: 21

Related Questions