[FIXED] Primeng, dynamically uncheck p-checkbox with pButton


i originally found this question, which is really similar to my situation:

how to uncheck/check a primeng checkbox manually

and this is a StackBlitz where it shows my problem:


basically, i am looping through data that can be any length and displaying it in a table.

one of the columns just has a p-checkbox with (onChange), that when checked and unchecked, it passes in some parameters for me to keep track of in an array.

i am trying to then uncheck all the p-checkboxes with a button click.

i found another question/solution that mentioned using @ViewChildren, ElementRef, QueryList but it was having a problem trying to figure out what "nativeElement.checked" was.

and other questions/solutions i found involved knowing the length of the checkboxes beforehand, and using *ngFor through an array to display the correct amount of checkboxes. i tried to use similar logic with my setup, but couldn’t get it working either.


Simply you can control the checkboxes within your model

  tableData: { id: number; name: string; isChecked?: boolean }[] = [
    { id: 1, name: 'first' },
    { id: 2, name: 'second' },
    { id: 3, name: 'third' },

Then add ngModel to the html

  <td>{{ tdata.id }}</td>
  <td>{{ tdata.name }}</td>
  <td colspan="2">
      (onChange)="changeCheckmark($event, tdata.id, tdata.name)"

and reset the state

  clickButton() {
    this.tableData.filter(z => z).forEach((x) => (x.isChecked = false));

Answered By – szymonhel

Answer Checked By – Pedro (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published