0

I develop a web app where users can post text, images, Files a post text can contain links also, for example

this is my webpage link: https://demo.com/page1/home

I store the above text in the database and I want to make https://demo.com/page1/home this text is clickable. What can I do..?

For example, I want something as follows

Comments use mini-Markdown formatting:

[link](http://example.com)

I store post text in a variable userPostObj.post_text

<mat-card-content>
        <pre class="post-text">{{userPostObj.post_text}}</pre>
    </mat-card-content>

as above I use mat-card to display post.

Amol_G
  • 375
  • 1
  • 12

6 Answers6

1

Use this K-Coding's SO

If you want to navigate to an external url, you not use router.navigate else

constructor(...,@Inject(DOCUMENT) readonly document: Document) {}

get window(): Window { return this.document.defaultView; }

@HostListener('click', ['$event'])
onClick(e: any) {
    e.preventDefault();
    const href = e.target.getAttribute('href');
    if (href)
    {
      this.window.open(href);
    }
  }
Eliseo
  • 50,109
  • 4
  • 29
  • 67
0

use the <a> & </a> tags - these tags define a hyperlink.

Matt Spencer
  • 11
  • 2
0

Before you render the entire text, you have to wrap it with anchor tag <a> and add href property on it with text as its value.

<a href="https://demo.com/page1/home">https://demo.com/page1/home</a>
pdzxc
  • 111
  • 6
0

You should use and pass url in href value like this:

<a href="https://demo.com/page1/home">https://demo.com/page1/home</a>
Nensi Gondaliya
  • 67
  • 5
0

I suggest you to use of regex to find and extract links from the text. and then put them inside a tag in your HTML or anywhere you want

Mohammad ILA
  • 17
  • 5
0

You can use this inbuilt functionality in jinja

<mat-card-content>
    <pre class="post-text">{{ userPostObj.post_text|urlize }}</pre>
</mat-card-content>
the_globehead
  • 1