CODEWITHSUNDEEP
angularag-grid
gaurav gupta
gaurav gupta

Reputation: 171

How to change Header name dynamically based on the data coming from backend?

I am using ag-grid in my angular application. I have defined Headers for my grid inside columnDefs array. There is one header for my column as Amount. I want this to be dynamic like if the currency coming from backend is USD i want my header to be 'Amount USD', if the currency is INR i want my header to be 'Amount INR' and so on. I have tried everything given in documentation but i am unable to get this working.

I have tried using setColumnDefs(colDefs) but its not working or maybe i am not using it correctly as in docs not much is given about its usage

My Code is as follows:-

My Component file code

ngOnInit() { 
      this.columnDefs2 = [
      {
        headerName: '#', width: 30, checkboxSelection: true, suppressSorting: 
         true,
        suppressMenu: true, hide: this.colhide, cellStyle: {
          'padding-top': '2px',
        }
      },      
      { headerName: 'Currency', field: 'currency', colId:'currencyname', width: 
       70, minWidth: 70, maxWidth: 150, cellStyle: { 'padding-top': '2px' }
      },

      { headerName: 'Amount', field: 'amount', width: 65, minWidth: 65, 
       maxWidth: 150, cellStyle: { 'padding-top': '2px' }
      },
      { headerName: 'Amount USD', field: 'amountUSD', width: 100, minWidth: 100, 
        maxWidth: 150, cellStyle: { 'padding-top': '2px' } 
      }
    ];   
  }

onGridReady(e,row){
    var col = this.gridOptions.columnApi.getColumn("currencyname");
    var colDef = col.getColDef();
    // update the header name
    colDef.headerName = "New Header";
    this.gridOptions.api.refreshHeader();

  }

HTML Code

<ag-grid-angular style="width: 100%; height: 100%" class="ag-dark" [columnDefs]="columnDefs2" (cellClicked)="agGridCellClicked($event, row)"
                        [rowData]="row.contDetailJO" rowSelection="multiple" (rowSelected)="onRowSelected($event, row)" (onGridReady)="onGridReady($event, row)" [gridOptions]="{rowHeight: 50}"
                        [domLayout]="'autoHeight'"  [enableColResize]="true">
                      </ag-grid-angular>

Upvotes: 2

Views: 6368

Answers (2)

szachmat
szachmat

Reputation: 178

You could specify headerValueGetter as described in this answer.

Here is an exemplary stackblitz.

Upvotes: 1

Sangar Lal
Sangar Lal

Reputation: 50

in ts defaultDateFormat: string; defaultTimeFormat: string;

constructor( private yourService: YourService,) {

this.defaultCurrencySymbol = this.settingService.defaultCurrencySymbol.value;

}

in service File defaultCurrencySymbol = new BehaviorSubject('');

systemOptions this is api Responce

private setCurrencyType(systemOptions: any[]) {

const DEFAULT_CURRENCY_SYMBOL = 'ApiResponceType';
const defaultCurrencySymbol = systemOptions.find(option =>
  option.attributes.keyName === DEFAULT_CURRENCY_SYMBOL).attributes.keyValue;
if (defaultCurrencySymbol){
  this.defaultCurrencySymbol.next(defaultCurrencySymbol);
}

}

In Html

{{defaultCurrencySymbol}}{{YourAmount}}

Upvotes: 0

Related Questions