I have implemented ag-grid in my Angular project and I am trying to redirect to a link when a specific cell is clicked.
Currently, I have a new value coming from an API which is nested inside an object in an array. For example, the object is dto-> dataitems[shortName], which I am displaying in the first column. However, I want to redirect the user to a router link when they click on this cell.
I attempted the following code but it did not work:
component.ts file:
headerName: 'Deal Name',
autoHeight: true,
colId: 'shortName',
field: 'shortName',
exportColumn: true,
width: 275,
cellRendererFramework: function(params) {
return '<a href="javascript:void(0)"'+
'[routerLink]="[/valuation,'+
'{deal: test,'+
'b: 2020Q3,'+
'c: someval,'+
'd: 9'+
'}]"' +
'target="_blank" rel = "noopener">'+params.value+'</a>'
},
Although the above code displays the value, clicking on the link does not work as expected.
I also tried using ng-template with the code below, however, when I add my column, it shows a blank value:
html :
<ng-template #dealNameCell let-row>
<a
*ngIf="row.canView"
href="javascript:void(0)"
[routerLink]="[
'/valuation',
{
deal: row.someval,
b: row.someval,
c: row.someval,
d: row.someval
}
]"
queryParamsHandling="merge"
>
{{ row.shortName }}
</a>
<a
data-toggle="modal"
data-target="#changeQuarterModal"
*ngIf="!row.canView"
href="javascript:void(0)"
queryParamsHandling="merge"
>
{{ row.shortName }}
</a>
</ng-template>
When using the above code, the column appears blank and no value is displayed. Adding columns that are at the root level of the object works fine. But the issue arises when trying to retrieve data nested inside an array within an object.