ag-grid buttonrenderer non-static label for each button

Question

I am trying to immplement a buttonrenderer inside angular ag-grid

so i have a columndefs defined. The problem is the label of button is static and cannot be changed. Hence all buttons have same label, but i want to give the cell content value ('field from columndefs') as label to the button

Is that possible? If yes any ideas how?

https://stackblitz.com/edit/angular-ag-grid-button-renderer?file=src/app/app.component.ts

Answer 1

You can just simply use valueGetter method of the Ag-grid.

We can render the value for the particular column based on it's field value. Please try to change your code something like below,

 columnDefs = [
    {
      headerName: 'Button Col 1',
      cellRenderer: 'buttonRenderer',
      valueGetter: (params) => this.displayColumnLabel(params.data.fieldName)
      cellRendererParams: {
        onClick: this.onBtnClick1.bind(this),
        label: 'Click 1'
      }
    },
   ...
   ];

  displayColumnLabel(fieldValue) {
    if(fieldValue) {
      return fieldValue; // do something you want to do with value (modifications)
    }
    return 'some default text or value';
  }

Happy Coding.. :)

Answer 2

I am not sure, if I get your question right but you can change the ButtonRenderComponent to something like this:

<button type="button" (click)="onClick($event)">{{params.data.make}}</button>

Answer 3

button-rendered.component.ts
this.label = this.params.value|| null;

app.component.ts

columnDefs = [
    {
      headerName: 'Button Col 1',
      cellRenderer: 'buttonRenderer',
      field: 'make',
      cellRendererParams: {
        onClick: this.onBtnClick1.bind(this),
        label: 'Click 1'
      }
    },
    {
      headerName: 'Button Col 2',
      cellRenderer: 'buttonRenderer',
      field: 'model',
      cellRendererParams: {
        onClick: this.onBtnClick2.bind(this),
        label: 'Click 2'
      }
    },
    { headerName: 'Model', field: 'model' },
    { headerName: 'Price', field: 'price' }
  ];

you can also access the data for a row in the params.data in the renderer and write logic to show label based on different field values in that row

Answer 4

you need to update the logic in your button renderer to render the label based on params.data rather than getting hardcoded value from colDefs.

In your button-renderer.component.ts change lable logic like below

 agInit(params): void {
    this.params = params;
    debugger;
    this.label = params.data.make || null; // here use any property from params.data or write custom logic to populate label.
  }

stackblitz demo