CODEWITHSUNDEEP
angularag-grid
CPK_2011
CPK_2011

Reputation: 1150

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

AssetName Error

I have added my code in Stackblitz below.

Stackblitz

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.

enter image description here

Upvotes: 2

Views: 2750

Answers (1)

Yan Koshelev
Yan Koshelev

Reputation: 1129

I think you just don't import RouterModule or miss forRoot method on RouterModule. Also you need to make sure that you have the same AgGridModule.withComponents with your renderer component. There is an example where links are works: Stackblitz

Upvotes: 1

Related Questions