issue with cell render in ag-grid in angular

Question

I am using ag-grid in angular and i want to redirect to a link when clicked on a particular cell.

So here i have a new value that comes from the api which is in an array under an object. that is object dto-> dataitems[shortName] which i am showing in the first column but when user clicks on that i want to redirect it to the router link.

I tried the below code but it is not working.

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>'
          },

when i use the above code i see the value but when i click on the link it does not work.

Also i tried the below code using ng-template but in that if i am adding my column it just shows me 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 i use the above code i dont see column as null. No value is showing up. Here if i put some columns that are at root level of the object then it works. But my data is under an array inside an object where i am not able to retrieve that data

Answer 1

So a cell renderer can definitely be used to navigate, just as any other component. Our projects preferred method has been to define the base of the link in the component, something like link = '/accounts/users/', and then access the data necessary via

link = '/accounts/users/'
linkText = params.value.linkText; 


agInit(params: any): void {
   this.link += params.value;
// or if you have an array of link params:
// for(const linkSegment of params.value.linkValues) {
//  this.link += linkSegment + '/';
// }
}

then, in the template, simply:

<a class="my-link" [routerLink]="link">{{params.linkText}}</a>

You can also do the other form of linking, where you use router.navigate in the component, but that's up to you.

Hope it helps, happy coding!