7

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!

McPhelpsius
  • 253
  • 1
  • 4
  • 16
  • 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 Apr 28 '16 at 17:08
  • 1
    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 Apr 28 '16 at 17:11
  • [Above solution is not loading inline html styles. Please check my answer here to load html with inline styles correctly.](https://stackoverflow.com/a/65043342/7410456) – Rajeev Kumar Nov 27 '20 at 20:15

1 Answers1

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

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567