angular - detect change in component grid when a checkbox status in a headerComponent is changed

Question

i'm new on ag-grid and i have this grid containing one column.

column3=[
    {
        field: 'useselected',
        headerName: 'Users selected', 
        sortable: true, 
        filter: 'agTextColumnFilter', 
        
        checkboxSelection: true,
        headerComponentFramework:UserSelectedHeaderComponent,
        headerComponentFrameworkParams:{
            TaChecked:true,
            UwChecked:false
        },
        
        
        
        
    }
]

this is my grid:

<ag-grid-angular

style="width: 202px; height: 500px;"
class="ag-theme-alpine"
[columnDefs]="column3"
[rowData]="row4"
rowSelection="multiple"
[gridOptions]="gridOption"
(ComponentStateChangedEvent)="ComponentStateChanged($event)"
(selectionChanged)="getSelectedRows()"
>
</ag-grid-angular>

and this is my custom component for the header:

@Component({
    selector:'app-user-selected-header',
    templateUrl:'./user-selected-header.component.html',
    styleUrls:['./user-selected-header.component.scss'],
})
export class UserSelectedHeaderComponent {
displayHeader:any
TaChecked:boolean
UwChecked:boolean
constructor(){}

agInit(params){
    this.displayHeader=params.column.colDef.headerName
    this.TaChecked=params.column.colDef.headerComponentFrameworkParams.TaChecked
    this.UwChecked=params.column.colDef.headerComponentFrameworkParams.UwChecked
    console.log('params',params)
}
}

and my html code for the headercomponent:

<div class="ag-cell-label-container" role="presentation" style="display:flex;flex-direction:column">
                
    <div ref="eLabel" class="ag-header-cell-label" style="height:48px" role="presentation">
    <span ref="eText" class="ag-header-cell-text" role="columnheader">{{displayHeader}}</span>
    
    </div>
    <div style="flex-direction: row;display: flex;justify-content: space-evenly; align-self: stretch;">  
    
    
   
    <li><input  name="radioSelect"  type="checkbox" [checked]="TaChecked" [(ngModel)]="TaChecked">TA</li>
    <li><input name="radioSelect"  type="checkbox" [checked]="UwChecked" [(ngModel)]="UwChecked">UW</li>
    </div>
    <div style="height:48px" class="ag-floating-filter-input">
    <select class="form-select" aria-label="Default select example">
    <option value="1">One</option>
    <option value="1">One</option>
    <option value="1">One</option>
    </select>
    </div>
    </div>

right now if the user click on a checkbox these two params are changing values

headerComponentFrameworkParams:{
            TaChecked:true,
            UwChecked:false
        },

and i'm able to see theme changing values in the UserSelectedHeaderComponent component but i'm not able to detecte those changes in the grid component. please if anyone know how can i achieve that.

Answer 1

When using the headerComponentFramework the default props you get in addition to the params you pass via headerComponentFrameworkParams have the current gridApi (as api) in them.

In your custom header component when your checkbox is clicked you can do the following :

gridApi.forEachNode(node => {
      node.setSelected(true);
    });

that will loop over all the visible rows in the grid and set them to selected.