Search code examples
angularag-grid-angular

Angular ag-grid - how do I collect a header clicked event?


I want to catch an event from a header click in a non-sorted column and I can't figure out how to do so. I can get it if I turn on sorting with onSortChanged but if I do that, I can't suppress the sort/turn off the arrows form displaying. Any ideas how to simply grab the a header clicked event? Thank you.


Solution

  • To achieve expected result, use below option of using addEventListener on Header cell

     this.gridOptions = <GridOptions>{
              enableSorting: false,
              enableFilter: true,
              onGridReady: (params) =>{
                const header = document.querySelectorAll('.ag-header-cell');
            console.log(header);
            header.forEach(v => {
              v.addEventListener('click', function(event){
                console.log("clicked")
              })
            });
              }
            };
    

    working code for reference- https://stackblitz.com/edit/angular-ag-grid-angular-54vy3p?file=app/my-grid-application/my-grid-application.component.ts

    Currently there is only rowClick events and no Column header events