How to convert URL cell text as small link when press on it open as URL?

Question

How to convert cell text as link when press on it open on URL browser on angular 7 ?

I have cell text for column offilneURL text inside cell display URL as text

I need to convert text or replace text with link then when press on it redirect to URL directly.

component.html

<tbody>
<ng-container *ngFor="let repcon of ReportControl">
                  <ng-container *ngFor="let repdata of ReportData">
                    <tr *ngFor="let rep of reportdetailslist">

                      <td *ngFor="let coln of headerCols">


                        <span>


                          {{rep[coln]}}
                        </span>
                        <div *ngIf="coln==repcon.fieldName">
                          <div *ngIf="repcon.columnType==1">
                            display text as link url
                          </div>

                        </div>
                        </td>
                    </tr>
                  </ng-container>
                </ng-container>
</tbody>

Sample data

RevisionId   offilneURL
122345       https://source.z2data.com/2019/1/13/8/55/47/351/662203977/21527_SPCN.PDF
             display text as link url

Above exactly current status of data I Expected to be :

RevisionId   offilneURL
    122345       URL link

Small shortcut name when click on it redirects to link URL above. I need to make as URL for two reason :

Firstly, it takes too much space.

Secondly, I can click link directly without copy and past URL browser.

Updated

to access url on every link by {{rep.offilneURL}}

Can you tell me how to pass {{rep.offilneURL}} and open as url with short name description

Answer 1

First of all, there is no press origin event in js, but you can use click event instead, like dom.Click =function (e) {}. You can get the url text in the parameter e, and then call window.open (url) to jump