CODEWITHSUNDEEP
angulartypescriptag-gridag-grid-angular
Subhendu Mahanta
Subhendu Mahanta

Reputation: 1021

In ag-grid how to get dynamic header name?

I am using ag-grid with angular. I want one of the column name to be dynamic. So in colDefs object for that column I do not define headerName, rather define a headerValueGetter.

headerValueGetter: this.partnerHeaderValueGetter
'
partnerHeaderValueGetter(params) {

  return 'Select Partner';

}

I did not want it this way. There are two radio buttons, value of the dynamic header will depend on which of the radio buttons is selected. But parameter for the function partnerHeaderValueGetter is params which is having gridApi, columnApi etc.How to make this function aware of the radio button which is not part of ag-grid? The code I wanted to work is as follows:

partnerHeaderValueGetter(params) {
  if (this.selectedSurveyLevel == 'Partner'){
    return 'Select Partners';
  }
  else if (this.selectedSurveyLevel == 'Site'){
    return 'Select Sites';
  }
  return 'Select Partners';
}

But the function partnerHeaderValueGetter cannot access 'this', it is undefined.

Upvotes: 1

Views: 1581

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81520

Try using arrow function instead. It's likely that you reference the wrong this.

  • If you use the ES5 function (like in your question), this will be binded the the caller context.

  • If you use the arrow function, this will be binded to the code that contains the arrow function.

partnerHeaderValueGetter = (params) => {
  if (this.selectedSurveyLevel == 'Partner'){
    return 'Select Partners';
  }
  else if (this.selectedSurveyLevel == 'Site'){
    return 'Select Sites';
  }
  return 'Select Partners';
}

Upvotes: 0

Kunal Karmakar
Kunal Karmakar

Reputation: 581

One simple way is to use arrow function instead of normal functions:

someValueInComponent: string;
columnDef = [
    {
        headerValueGetter: (params) => this.someValueInComponent + ' some logic',
    }
];

Upvotes: 1

Related Questions