Angular2 parse string to html

Question

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

Do you want to add HTML that is interpreted by the browser as markup? — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 21, 2016 at 20:25
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 <a href="http://google.com">blah</a> I hope I understood your question correctly — Ryan Sayles
– Ryan Sayles, Commented Jan 21, 2016 at 20:28

Community · Accepted Answer · 2017-05-23 12:34:45Z

97

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

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

CommunityBot

11 silver badge

answered Jan 21, 2016 at 20:24

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

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

1 Comment

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

Lorka · Accepted Answer · 2021-04-17 13:13:58Z

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 
 } 
}

answered Apr 17, 2021 at 9:48

Lorka

791 silver badge3 bronze badges