Click event for group header on ag-grid angular - ag-grid

Question

I am using ag-angular-grid in this I have group header and child columns also.
I want to know click event of that group header click.
below how I create header :
{
headerName: "<span id='performanceData'>Performance</span> <i class='fa fa-eye group-open-settings-button' aria-hidden='true' data-group='PerformanceData' ></i>",
groupId: "PerformanceData",
marryChildren: false,
onCellValueChanged:event=>{
console.log('trst');
},
children: [
{
headerName: "Talent Decision",
headerTooltip: "Talent Decision",
on click this i wants to open a popup.
any idea?

Answer 1

You will need to create a separate component for your custom group header. This can be done by implementing the IHeaderGroupAngularComp and using headerGroupComponentFramework, as stated on the documentation for the Header Group component.
Here is a rough sketch on how you can get it done.
First and foremost, on your main component that is using ag-grid, we will need to bind the input properties for frameworkComponents, and import your custom header group component.
On the component.html,
<ag-grid-angular style="width: 100%; height: 350px;" class="ag-theme-balham"
[columnDefs]="columnDefs"
[frameworkComponents]="frameworkComponents"
<!-- other properties -->
</ag-grid-angular>
On the component.ts, define the component which will be binded to your frameworkComponents, and for your custom header.
import { CustomHeaderGroupComponent } from '../custom-header-group-component/custom-header-group.component';
constructor() {
this.frameworkComponents = {
customHeaderGroupComponent: CustomHeaderGroupComponent,
};
this.columnDefs = [
{
headerGroupComponent: 'customHeaderGroupComponent',
// other properties for your group header
}
];
}
Do not forget to include your custom header group component on your module.ts too:
import { CustomHeaderGroupComponent } from "./custom-header-group-component/custom-header-group.component";
#NgModule({
imports: [
AgGridModule.withComponents(
[
CustomHeaderGroupComponent
]
),
// other imports
],
declarations: [
CustomHeaderGroupComponent,
// other components
],
// others
})
On your custom component.html template for the header group, you can then bind the (click) event to the header to it:
<div (click)="openPopup($event)"><span id='performanceData'>Performance</span> <i class='fa fa-eye group-open-settings-button' aria-hidden='true' data-group='PerformanceData' ></i></div>
And on your component.ts for the header group, you can define the openPopup() method:
import { Component } from '#angular/core';
import { IHeaderGroupAngularComp } from 'ag-grid-angular';
import { IHeaderGroupParams } from 'ag-grid-community';
.
.
.
export class CustomHeaderGroupComponent implements IHeaderGroupAngularComp {
params: IHeaderGroupParams;
agInit(params: IHeaderGroupParams) {
this.params = params;
}
.
.
openPopup() {
// handle the rest to enable to opening of the popup
}
}
The full working demo is actually available here, though it is a complete demo for all the features.