In Angular 14 and PrimeNG, how do I get the state of a checkbox in the click handler?

Question

I'm using PrimeNG and Angular 14. I have a checkbox in my p-table

<p-tableCheckbox (click)="onSelectAll($event)"></p-tableCheckbox>

I would like to know if the state of the box is checked or unchecked. So I tried

onSelectAll(event: any) { if (event.checked) { this.selectedCustomers = this.customers.slice(); // select all } else { this.selectedCustomers = []; // unselect all } }

but "event.checked" is repeatedly undefined. I also tried "event.target.checked" but to no avail. How do I tell if my checkbox is checked or not?

Answer 1

You should to use these three events on p-table tag itself not on p-tableCheckbox

  <p-table 
    
    (onRowSelect)="pass your function here"
    (onRowUnselect)="pass your function here"
    (onHeaderCheckboxToggle)="pass your function here"

don't forget to add selection array for your rows [(selection)]="selectionRowsArr"

• onRowSelect : will give you the selected row inside event.data
• onRowUnselect : will give you the unselected row inside event.data
• onHeaderCheckboxToggle : will give you if this check box checked or not inside event.checked

you can check this link: check table event and type of selection tabels