CODEWITHSUNDEEP
javascripthtmlangulartypescripturl
Chris Garsonn
Chris Garsonn

Reputation: 777

How to detect clickable link in HTML

I am getting a response in a list from backend and putting error codes to a table as in picture enter image description here

This explanation string has a URL in it as you see www.google... I want to make it clickable but I cannot.

When I try to replace the link with regex with following codes (my model object for the table item is response: errorArray.slice(1, errorArray.length));

const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
        const errorArray = errorResponse.error.toString()
          .replace(/\[/g, "")
          .replace(/]/g, "")
          .replace(urlRegex, "<a href='$1' target='_blank' ></a>")
          .replace(/\.,/g, ".")
this.allUploadedPinsFiles.push({uploadDate: uploaded, fileName: file.name,
          status: status, responseHeader: errorArray[0], response: errorArray.slice(1, errorArray.length)});

It becomes enter image description here

It is replacing item in the error array but in UI it still shows as a text. How can I make it that it can understand the link in a text and make it clickable?

and here is the html code for that list:

<div *ngIf="upload.response.length > 0">
          <ul class="list-item">
            <li *ngFor="let singleResponce of upload.response">{{singleResponce}}</li>
          </ul>
        </div>

Upvotes: 1

Views: 434

Answers (2)

Ininiv
Ininiv

Reputation: 1325

Sanitize the data and pass to the html

this.sanitizer.bypassSecurityTrustHtml("<a href='www.google.com' target='_blank'>My Link</a>)

Try this

Working link

Upvotes: 1

Adrita Sharma
Adrita Sharma

Reputation: 22213

Use innerHtml

 <li *ngFor="let singleResponce of upload.response">
     <span [innerHtml]="singleResponce"
 </li>

Upvotes: 0

Related Questions