0

So I'm building a basic app using nodejs and Angular, where users can post stuff that may contain links and I'm trying to figure out how can I make the links that they share clickable in the frontend.

I did some reseach and I've found this library called linkify that turns string into links but in order to use you will have to use the innerHtml property and i prefer not to because then if a user writes html code as a post it will get nested too.

Is there a solution for me to nest only the link that I want instead of the whole content of the post?

Improve this question

1 Answer 1

Reset to default
1

Just use angular property binding

 <a [href]="website.url" [textContent]="website.name"> </a>
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This doens't solve my problem, this is nesting the whole post, I want to display the content of the post and nest the link only as html tag
For a better understanding of what you are trying to achieve. Could you please create some sample stackblitz.
Let's say display my posts this way <div *ngFor="let post of posts"> <p>{{post.content}}</p> </div> Basically this post.content may or may not contain a url, in case there's one I want to transform it into a link and nest into the DOM so it can be clickable
I don't want to use the innerhtml property because in case there's some html code in the post.content it will get nested too
In that case, I guess there is only one way, you have to use regex that searches the link inside the content of your post and converts that into a hyperlink

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.