How to add a hyperlink in coiumn of dx-data-grid in Angular?

Question

Following code is being used:

<dx-data-grid [dataSource]="openCasesdatasource" [showBorders]="true">
 <dxi-column dataField="Picture" cellTemplate="cellTemplate"></dxi-column>
 <div *dxTemplate="let data of 'cellTemplate'"><a [href]="data.url"></a></div>
</dx-data-grid>

This is the data which need to be displayed:

let abc: abc[] = [{
    "picture": "harry",
    "active": "true",
    "url": "https://google.com"}]

Answer 1

HTML

<dx-data-grid
 [dataSource]="openCasesdatasource"
 [showBorders]="true"
 (onCellClick)="openPicture($event)">   
 <dxi-column dataField="Picture" cellTemplate="cellTemplate">
      <div *dxTemplate="let data of 'cellTemplate'">
            <img src="data.value">
      </div>
 </dxi-column>
</dx-data-grid>

TS

openPicture(){
    if (e.rowType == "data" && e.column.dataField === "Picture") {
      if(e.value != null) {
        window.open(e.value, "_blank");
      }
    }
}