Leo Leo - 3 months ago 16
HTML Question

angular2 url links in div body

I have a

pre
block which is populated using interpolation:

<pre>{{text}}</pre>


and
text="some text https://google.com some more text"


I want to get something like that:

<pre>some text <a href="https://google.com" target="_blank">link</a> some more text</pre>


and as a result in browser I want to see only a hyperlink to the specified url:

some text link some more text


but if I try to inject html into text var for sure it will be shown as a plain text:

some text <a href="https://google.com" target="_blank">link</a> some more text


Is there a simple way to get desired result? without using ngFor

Answer

This is what you're looking for:

text="some text <a href='https://google.com' target='_blank'>link</a> some more text"

And in your template:

<pre [innerHTML]="text"></pre>
Comments