Ionic 2/ angular 2 : string replaced with HTML tag isn't rendered properly

Question

I have an array of contents in my JSON which contain URLs in there as text. I want to find and replace those text URLs with links. What's actually happening? It does replace the URL with <a> tag and proper URL in href="" but still render this <a> tag as text and not as HTML

urlifyContent(){
   let urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
   for (let index = 0; index < this.message.Content.length; ++index){
       this.message.Content[index] = this.message.Content[index].replace(urlRegex,`"<a href='$1'target='_blank'>$1</a>"`);
   }
}

How do you try to 'render' it? Are you placing it in a {{var}} inside an angular template? — Poul Kruijt
– Poul Kruijt, Commented Jan 18, 2017 at 9:31
{{message.Content}} it just put a changed URL with <a> tag as a text and not converting it into HTML — savinn
– savinn, Commented Jan 18, 2017 at 9:33

Poul Kruijt · Accepted Answer · 2017-03-17 11:30:57Z

3

According to your comment you are using {{message.Content}} to bind the html you created using your urlifyContent() method. This will not work, because {{}} will parse the value to a string, and not HTML.

To add HTML to your page, you should use the [innerHTML] directive:

<div [innerHTML]="message.Content"></div>

However, it's worth mentioning that this won't parse any angular components or directives or binding present in that HTML snippet. It should just be plain html

edited Mar 17, 2017 at 11:30

answered Jan 18, 2017 at 9:36

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

Collectives™ on Stack Overflow

Ionic 2/ angular 2 : string replaced with HTML tag isn't rendered properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related