add hyperlink to a column in igx-grid

Question

I want to know how can I add a hyperlink to a single column in igx-grid? Here is a sample data:

  export const DATA: any[] = [
    {
     OrderID: 10524,
     SaleAmount: 3192.65,
     CategoryName: "Beverages",
     CompanyName: "Berglunds snabbköp",
     ShipCountry: "France",
     ShippedDate: new Date("1997-05-07T00:00:00Z"),
     Website: "https://www.infragistics.com/"
   },
   {
     OrderID: 10511,
     SaleAmount: 2550.0,
     CategoryName: "Beverages",
     CompanyName: "Bon app'",
     ShipCountry: "France",
     ShippedDate: new Date("1997-04-21T00:00:00Z"),
     Website: "https://www.google.com/"
   },
  ]

score 3 · Accepted Answer · edited Apr 21 '21 at 14:23

Hyperlinks could be added in igxCell via using cell templates:

<igx-column field="Website" header="Website" [dataType]="'string'" [minWidth]='"200px"'>
    <ng-template igxCell let-cell="cell">
        <a class="truncate" href="{{cell.value}}" target="_blank">{{cell.value}}</a>
    </ng-template>
</igx-column>

Here you can find a stackblitz sample demonstrating how to achieve the required behavior.

Additionally, all the IgxCell’s properties are listed in the Infragistics documentation here and more about IgxColumnComponent can be found here.

add hyperlink to a column in igx-grid

1 Answers1