AG-GRID-ANGULAR - How to check/uncheck checkbox in header component if all checkboxes in the cell renderers are checked/unchecked?

Question

I am using ag-grid. I have a checkbox in the header using headerComponentFramework for a column (here, isBooked) and checkboxes in corresponding cells of the same column using cellRendererFramework.

My requirement is to check/uncheck the header checkbox when all the cell checkboxes are checked/unchecked. And, all this activity keeps the state of data associated with the grid updated.

This is how the grid looks - https://angular-fcgbt9.stackblitz.io/

The situation is replicated at this stackblitz link.

https://stackblitz.com/edit/angular-fcgbt9?embed=1&file=src/app/grid-header-checkbox/grid-header-checkbox.component.ts

Approaches that I tried are -

1. Using a Subject to emit value change. But, it looks the Subject is not getting subscribed to inside the agInit hook inside the header component.
2. Using gridApi.refreshHeader(). It looks like the Angular version of the header component interface (IHeaderAngularComp) does not have a refresh hook.

I am not able to update the value of the header checkbox when I run a logic for checking if all the cell checkboxes are checked/unchecked and try to update the value of the checkbox inside the header component.

Answer 1

You can use headerCheckboxSelection event along with onRowSelected event(this will update your data).

Here is a working code