Add hyperlink click event into ag-Grid Angular 6

I had spent lots of time to figure how to add hyperlink into ag-grid column and how to call function executed at on click event. This was looking very difficult but later it came with very simple solution.

My requirement was to add hyperlink on Grid column with the rendered data, so no button where we have static word like “Add” etc.

Simple solution I could figure out is to add cellClicked event

.html page

<ag-grid-angular

    (cellClicked)='onCellClicked($event)'>

</ag-grid-angular>

And when cellClicked   by user execute Type Script function

.ts page

onViewCellClicked(event: any)

  {

    if (event.column.colId =="FirstName" ) // only first column clicked

    {

      // execute the action as you want here in on click of hyperlink

    }

// here you can add multiple if statement based on colId to do the action      //on cell clicked

  }

Your column definition as below

columnDefs = [{

headerName: 'First Name', field: 'FirstName', suppressMenu: false, unSortIcon: true, width:150,

      cellRenderer: function(params) {

        // below line is just to create empty without any action hyperlink

// to trick the user, but actual action happen onViewCellCliced() // function

        return '<a href="#">' + params.value + '</a>';

            },

            tooltipField: "FirstName", headerTooltip: "First Name"     

      }];