Guide to inserting an Angular routerLink within a cell in ag-Grid

Question

Guide to inserting an Angular routerLink within a cell in ag-Grid

When attempting to display a link on a basic HTML page, the code looks like this:

<a [routerLink]="['/leverance/detail', 13]">A new link</a>

However, when trying to render it within an ag-Grid, the approach is as follows:

src\app\leverancer\leverancer.component.ts

ngOnInit() {
    this.dataGridColumnDefs = [
          { 
            headerName: 'Type', 
            field: 'leveranceType.name', 
            width: 150,
            cellRenderer: this.customCellRendererFunc       
          }
    ];
}

customCellRendererFunc(params): string {
  const cellContent `<a [routerLink]="['/leverance/detail', 13]">A new link</a>`;
  return cellContent;
}

Despite the implementation, the routerLink does not work within my ag-Grid. Could you offer guidance on how to properly render a working routerLink in my ag-Grid?

angular typescript ag-grid-angular

Answer 1

Answer №1

It appears that the cellRenderer only allows for standard HTML and does not support any Angular-specific elements.

If you are looking to incorporate Angular components, consider using cellRendererFramework instead. Here are some examples showcasing its usage:

If you are utilizing RouterLink, ensure that you have included RouterModule in the moduleImports.

Answer 2

It appears that the cellRenderer only allows for standard HTML and does not support any Angular-specific elements.

If you are looking to incorporate Angular components, consider using cellRendererFramework instead. Here are some examples showcasing its usage:

If you are utilizing RouterLink, ensure that you have included RouterModule in the moduleImports.

Answer 3

Answer №2

Innovated a versatile component that can be applied to any link cell.

Instructions for Use

columnDefs = [
  {
    colId: 'My Column',
    cellRendererFramework: AgGridLinkCellComponent,
    cellRendererParams: {
      // `text` and `link` both accept either an string expression (same as `field`) or a function that gets ICellRendererParams
      text: 'title',
      link: (params: ICellRendererParams) => `/my-path/${_.get(params, 'data.id')}`
    }
  }
]

To integrate this component into your AppModule, follow these steps:

imports: [
    AgGridModule.withComponents([
      AgGridLinkCellComponent
    ])
]

The code snippet below showcases the actual component functionality:

import * as _ from 'lodash';
import {Component} from '@angular/core';
import {AgRendererComponent} from 'ag-grid-angular';
import {ICellRendererParams} from 'ag-grid-community';

@Component({
  selector: 'app-ag-grid-link-cell-component',
  template: '<a [routerLink]="link">{{ text }}</a>',
})
export class AgGridLinkCellComponent implements AgRendererComponent {
  link: string;
  text: string;

  constructor() {
  }

  agInit(params: ICellRendererParams): void {
    this.updateDisplay(params);
  }

  updateDisplay(params: ICellRendererParams): boolean {
    const dataParams = params.colDef.cellRendererParams;
    this.link = _.isFunction(dataParams.link) ? dataParams.link(params) : _.get(params.data, dataParams.link);
    this.text = _.isFunction(dataParams.text) ? dataParams.link(params) : _.get(params.data, dataParams.text);
    return false;
  }
}

Answer 4

Innovated a versatile component that can be applied to any link cell.

Instructions for Use

columnDefs = [
  {
    colId: 'My Column',
    cellRendererFramework: AgGridLinkCellComponent,
    cellRendererParams: {
      // `text` and `link` both accept either an string expression (same as `field`) or a function that gets ICellRendererParams
      text: 'title',
      link: (params: ICellRendererParams) => `/my-path/${_.get(params, 'data.id')}`
    }
  }
]

To integrate this component into your AppModule, follow these steps:

imports: [
    AgGridModule.withComponents([
      AgGridLinkCellComponent
    ])
]

The code snippet below showcases the actual component functionality:

import * as _ from 'lodash';
import {Component} from '@angular/core';
import {AgRendererComponent} from 'ag-grid-angular';
import {ICellRendererParams} from 'ag-grid-community';

@Component({
  selector: 'app-ag-grid-link-cell-component',
  template: '<a [routerLink]="link">{{ text }}</a>',
})
export class AgGridLinkCellComponent implements AgRendererComponent {
  link: string;
  text: string;

  constructor() {
  }

  agInit(params: ICellRendererParams): void {
    this.updateDisplay(params);
  }

  updateDisplay(params: ICellRendererParams): boolean {
    const dataParams = params.colDef.cellRendererParams;
    this.link = _.isFunction(dataParams.link) ? dataParams.link(params) : _.get(params.data, dataParams.link);
    this.text = _.isFunction(dataParams.text) ? dataParams.link(params) : _.get(params.data, dataParams.text);
    return false;
  }
}

Answer 5

Answer №3

Here is a solution that has been tested with angular 7 and it works perfectly for me.

ag-Grid offers events and callbacks, such as onCellClicked and cellRenderer.

The issue with onCellClicked and cellRenderer is that they operate in JS, so the this object associated with these callbacks will be a JS instance.

However, in order for Angular to execute functions or navigate to any URL, we require an instance of the angular component, which is not available in these callbacks.

Therefore, here is a solution to obtain that Angular instance to work with the component.

TypeScript stores the instance of the current object in _this whenever this is not accessible. We can retrieve the instance of the Angular component using:

const self = eval('_this');

This self will contain the instance of the Angular component, allowing us to call any function or service from the Angular component and also use self.router.navigateByUrl(url)

Here is an example:

{field: 'plan', headerName: 'Plan Case', sortable:true,filter:true,
  cellRenderer:function(paramObj){
    //to create a link within the cell
    return `<a href="javascript:void(0)" >Plan Case</a>`;
  }, 
  onCellClicked:function(data){
    const self = eval('_this');
    //navigate upon clicking on the cell
    self.router.navigateByUrl('YOUR_URL');
  }  
},

Alternatively, you can call any Angular function from the onCellClicked event. For example:

onCellClicked:function(data){
        const self = eval('_this');
        //call the test function from the Angular component
        self.test(data.data);
      }

Thank you

Answer 6

Here is a solution that has been tested with angular 7 and it works perfectly for me.

ag-Grid offers events and callbacks, such as onCellClicked and cellRenderer.

The issue with onCellClicked and cellRenderer is that they operate in JS, so the this object associated with these callbacks will be a JS instance.

However, in order for Angular to execute functions or navigate to any URL, we require an instance of the angular component, which is not available in these callbacks.

Therefore, here is a solution to obtain that Angular instance to work with the component.

TypeScript stores the instance of the current object in _this whenever this is not accessible. We can retrieve the instance of the Angular component using:

const self = eval('_this');

This self will contain the instance of the Angular component, allowing us to call any function or service from the Angular component and also use self.router.navigateByUrl(url)

Here is an example:

{field: 'plan', headerName: 'Plan Case', sortable:true,filter:true,
  cellRenderer:function(paramObj){
    //to create a link within the cell
    return `<a href="javascript:void(0)" >Plan Case</a>`;
  }, 
  onCellClicked:function(data){
    const self = eval('_this');
    //navigate upon clicking on the cell
    self.router.navigateByUrl('YOUR_URL');
  }  
},

Alternatively, you can call any Angular function from the onCellClicked event. For example:

onCellClicked:function(data){
        const self = eval('_this');
        //call the test function from the Angular component
        self.test(data.data);
      }

Thank you

Guide to inserting an Angular routerLink within a cell in ag-Grid

Answer №1

Answer №2

Answer №3

Similar questions

What could be the reason for the exclusion of 'null' from the return type of Document.getElementById in VS Code?

Parsing of the module has failed due to the presence of an unexpected character '' while attempting to import a video file

Having trouble with implementing Spotify OAuth in NextJS?

The code snippet for the React TypeScript Cheatsheet in the Portal sample appears to be malfunction

What are the best ways to personalize my code using Angular Devextreme?

Is there a way to retrieve the status_code 400 in Angular?

Tips for solving the error "Angular CLI version 7.0.3 cannot install node-sass"

New Chrome update restricts insecure cookies from functioning in Angular

Angular error message: The property 'results' is not found on the type 'ICandidate'

Issue with Component in Angular not functioning properly with proxy construct trap

Using Angular 4 in combination with Bootstrap 4 to create powerful data tables

Having issues fetching data from the store with the latest version of Ngrx

What is the best way to implement multiple pipe filters in Angular?

The dimensions of the div element are adjusting as I scroll on Firefox Mobile, however, there is a way to prevent this from happening using Angular

The Concept of Static Block in TypeScript

Is there a way for me to steer clear of having to rely on the Elvis Operator?

Invoking a function in an Angular 4 component using a <td> element

What is the Angular alternative to control.disable when working with a QueryList?

Implementing an overlay feature upon clicking a menu item - here's how!

Error: Unable to connect to 'ngbTypeahead' as it is not recognized as a valid attribute of 'input' in the template