Ag-grid Angular How to get click events on Header?

Question

Is there any way to get notified of click events on ag-grid's header in Angular?

The <ag-grid-angular>-Component offers multiple events for clicks on cells (e.g. cellDoubleClicked). Those don't get triggered for header clicks and I was unable to find any events specific for header clicks.

This question was already asked by someone else in the past and not answered, so I don't think, there's any built in way.

Why do I need this?

I'm working with another library to supply context menus for the application, but I want to differentiate between different context menus for headers and regular cells. So just listening to the default angular click event (on the whole grid component) doesn't help, because I need the clicked column/cell.

For reference I'm currently using ag-grid 15.0.0, but I also didn't find anything in the current documentation.

Answer 1

I think this may be possible if you define the header component (see: Header Components). In your template for the header component you can create a div element (or any other container element) and define the (click) event handler. This worked for me:

<div (click)='onHeaderClick($event)'>
  <p>Name</p>
</div>

(Of course you'd probably want to pass the header title in the parameters to the agInit() method, since you wouldn't want to create a separate header component for every header!)