Search code examples
angularurlquery-stringag-gridag-grid-angular

Hide aggrid columns conditionally based on route/query params

I'm using ag-grid version 27.3.0, I have defined colDefs by binding It to HTML [Coldefs]='Coldefs' and I have defined Coldefs in an array in ts file.

binding coldefs in HTML and defining array in .ts file

HTML

TS

Now I'm hiding the columns based on the value of the query params I have stored in ngOnInit(). Still, the issue is since I'm binding the colDefs in HTML colDefs are getting executed first, and then I get query params in a variable.

storing query parms on ngOnInit(), Route: /credit-debit-memo-history?custId=&repId=0&CF=&fdt=0001-01-01&tdt=0001-01-01&type=credit&relCust=

params

How can I access the query params in the colDefs so that I can hide and show the variables based on the query param value?

Not getting values because after colDefs ngOninit will set queryParams

not getting values of params

Note: I can generate colDefs array dynamically but I have over 2K+ grids in my angular application, it will be a great help if you help me to solve this issue. Thanks.

Solution

  • You can edit the hide property of the desired column in onGridReady and then use api.setColumnDefs(columns).

    setColumnDefs: The grid will redraw all the column headers, and then redraw all of the rows.

    onGridReady(params: any) {
   const col = this.columnDefs.find(x=>x.headerName === 'Type')
   col.hide = this.queryParams.type === 'debit'
   params.api.setColumnDefs(this.columnDefs).
}