'Ag-Grid Angular - How to enable Hyperlink for one of the columns
I am changing code from Kendo Grid to Ag-Grid and I am facing problem in making the link work with Ag-Grid
Below is the old code which is placed in one of the columns of Kendo Grid
<a *ngIf="dataItem.userStatus === 0"
[routerLink]="['/users/details/'+dataItem.userId]">{{dataItem.userName}}</a>
<span *ngIf="dataItem.userStatus === 1">{{dataItem.userName}}</span>
I am defining the new column in Ag-Grid with columnDefs as below
{
headerName: 'User Name',
minWidth: 150,
width: 250,
field: 'userName',
cellRendererFramework: RouterLinkRendererComponent,
cellRendererParams: {
inRouterLink: '[/users/details/]',
}
},
Below is the code for RouterLinkRendererComponent
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]);
});
}
}
How to make the Hyperlink work for UserName column with new Ag-Grid
Currently, the error is coming as below. Please consider assetName as userName below when I modify the template <a [routerLink]="[params.inRouterLink, params.value]" (click)="navigate(params.inRouterLink)">{{params.data.assetName}}</a> and it is coming for each row repeatedly
I have added my code in Stackblitz below.
I am getting the below error when I add ag-angular-grid in app.component.html file in Stackblitz. This is because of mismatch in the versions of the file. I need solution in Angular 6.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|


