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


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:


ngOnInit() {
    this.dataGridColumnDefs = [
            headerName: 'Type', 
            field: '', 
            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?


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

You want to use cellRendererFramework as seen in these examples:

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

Leave a Reply

(*) Required, Your email will not be published