Using cellRendererFramework in Angular 5 ag-grid data table

Question

I am building a app in angular 5. In my HTML page, I have a table which shows the data on being queried. This data is being displayed in ag-grid using directive. One of the column in grid is displayed as HTML link. I am using cellRendererFramework feature to show the values in column as link. It is working fine and displays the link on the value for that column in table for each row. My requirement is that I want to pass additional parameter to cellRendererFramework component from the main component class. The reason I need this is because when the link is clicked the Angular app displays new components using angular routers and I need to pass multiple values to other component.

I am not sure how to pass parameters to cellRendererFramework class.

Column definitions of data grid

this.columnDefs = [
      { headerName: "Hotel ID", field: "HotelID", width: 500,
        cellRendererFramework: LinkcompComponent },
      { headerName: "Account Number", field: "AccountNumber" , width: 700 },
      { headerName: "Customer Name", field: "PartyName", width: 670  }
    ];

HTML file of cellRendererFramework component

<a [routerLink]="['/trxDetails',params.value]">{{ params.value }}</a>

Is it possible to pass additional parameters to cellRendererFramework component?

sj0509 sj0509 · Accepted Answer · 2018-05-17T14:38:53

Did you find a way to do this ? I am in exactly the same situation as you. Need to pass the "routerLink" as a parameter to this cellRendererFramework component, so that I can make it generic and use the component in multiple ag-grids / pages.

@Component({
// template: '<a routerLink="/trade-detail">{{params.value}}</a>'
template: '<a [routerLink]="inRouterLink">{{params.value}}</a>'
})
export class RouterLinkRendererComponent implements AgRendererComponent {
   @Input('inRouterLink') public inRouterLink = "/trade-detail";
   params: any;

EDIT

Ok, found the answer on their website itself after a little more looking.

https://www.ag-grid.com/javascript-grid-cell-rendering-components/#complementing-cell-renderer-params

So, in my case, I pass the params like so:

BlotterHomeComponent class

columnDefs = [
{
  headerName: 'Status', field: 'status',
  cellRendererFramework: RouterLinkRendererComponent,
  cellRendererParams: {
    inRouterLink: '/trade-detail'
  }
},

RouterLinkRenderer Class

@Component({
template: '<a [routerLink]="params.inRouterLink">{{params.value}}</a>'
})
export class RouterLinkRendererComponent implements AgRendererComponent {
  params: any;

  agInit(params: any): void {
    this.params = params;
  }

  refresh(params: any): boolean {
    return false;
  }
}

Using cellRendererFramework in Angular 5 ag-grid data table

1 Answers