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