angularinfragisticsignite-ui-angularigx-grid

add hyperlink to a column in igx-grid


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/"
   },
  ]

Solution

  • 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.