How to Render an Angular routerLink inside the cell of an ag-Grid?

Issue

The link I am trying to render looks like this when I just try to render it on a basic HTML page:

<a [routerLink]="['/leverance/detail', 13]">A new link</a>

When trying to render it on the ag-Grid, I try to do like below:

src\app\leverancer\leverancer.component.ts

ngOnInit() {
    this.dataGridColumnDefs = [
          { 
            headerName: 'Type', 
            field: 'leveranceType.name', 
            width: 150,
            cellRenderer: this.customCellRendererFunc       
          }
    ];
}

customCellRendererFunc(params): string {
  const cellContent `<a [routerLink]="['/leverance/detail', 13]">A new link</a>`;
  return cellContent;
}

but I don’t see a working routerLink in my ag-Grid.
Can you tell me what I need to do to render a working routerLink in my ag-Grid?

Solution

I think cellRenderer only supports normal HTML (without any angular-specific stuff).

You want to use cellRendererFramework as seen in these examples:

• https://www.ag-grid.com/ag-grid-angular2-support/
• https://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-more-complex-angular-components

Since you use RouterLink, you probably need RouterModule in the moduleImports

Answered By – Kevin Doyon

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0