45

I'm importing rss items where in description there is a lot of html code (links, paragraphs, etc...). When I'm viewing it in component's view like:

{{rss.description}}

the output in site is like:

<a href="http://link.com">Something</a> <p>Long text</p>

How can I quickly and easy parse it to html? I don't want to cross it with jQuery. Thank you

elzoy
  • 5,237
  • 11
  • 40
  • 65
  • 1
    Do you want to add HTML that is interpreted by the browser as markup? – Günter Zöchbauer Jan 21 '16 at 20:25
  • 1
    If your data from Angular can be different types like you state: links, paragraphs, ect. You would have to check them dynamically in javascript and then build the elements that way. There is no standard functionality in angular to take: `google.com` and create `blah` I hope I understood your question correctly – Ryan Sayles Jan 21 '16 at 20:28

2 Answers2

96

Not sure if I understand your question correctly, but this might be what you want

<div [innerHTML]="rss.description"></div>

See also In RC.1 some styles can't be added using binding syntax for how to allow "unsafe" HTML.

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    I was using tinymce and when I retrieved from the DB the posted content of the editor I wanted to display it as html and this did the job. Thanks – JAF Mar 05 '18 at 14:05
0
<div class="innerhtml-class" [innerHTML]="variable.innerHtml"></div>

To add styles:

Component selector is: app-my-component

Add a class to the element hosting the innerHtml content in app-my-component template:

Add to the global styles file located in angular project src folder:

app-my-component { 
 .innerhtml-class { 
   declaration goes here 
 } 
}
Lorka
  • 49
  • 1
  • 3