Ag-Grid Link with link in the cell

Question

I am building angular 4 app with ag-grid and I am having an issue with trying to figure out how to put a link in the cell. Can anybody help me with that issue? Thanks

Answer 1

Please check this demo

cellRenderer: function(params) {   return '<a href="https://www.google.com" target="_blank" rel="noopener">'+ params.value+'</a>' } 

In this demo, the cell value for the column 'city' is a hyperlink.

Answer 2

I struggled with this the other day and it was bit more complex than I first thought. I ended up with creating a renderer component to which I send in the link and that needed a bit on NgZone magic to work all the way. You can use it in your column definition like this:

cellRendererFramework: RouterLinkRendererComponent, cellRendererParams: {     inRouterLink: '/yourlinkhere', } 

Component where inRouterLink is the link that you send in and params.value is the cell value. That means that you can route to your angular route that could look something like 'yourlink/:id'. You could also simplify this a bit if you don't want a more generic solution by not sending in the link and just hard coding the link in the template and not using the cellRendererParams.

import { Component, NgZone } from '@angular/core'; import { Router } from '@angular/router'; import { AgRendererComponent } from 'ag-grid-angular';  @Component({     template: '<a [routerLink]="[params.inRouterLink,params.value]"  (click)="navigate(params.inRouterLink)">{{params.value}}</a>' }) export class RouterLinkRendererComponent implements AgRendererComponent {     params: any;      constructor(         private ngZone: NgZone,         private router: Router) { }      agInit(params: any): void {         this.params = params;     }      refresh(params: any): boolean {         return false;     }      // This was needed to make the link work correctly     navigate(link) {         this.ngZone.run(() => {             this.router.navigate([link, this.params.value]);         });     } } 

And register it in

@NgModule({     imports: [         AgGridModule.withComponents([             RouterLinkRendererComponent,         ])     ], }) 

UPDATE: I have written a blog post about this: https://medium.com/ag-grid/enhance-your-angular-grid-reports-with-formatted-values-and-links-34fa57ca2952