'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



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source