title: SelectAll checkbox in header should get unchecked when move to next page when using p-tableHeaderCheckbox and p-table
body: <p>I am using <code>&lt;p-table&gt;</code> which has <code>&lt;p-tableHeaderCheckbox&gt;&lt;/p-tableHeaderCheckbox&gt;</code> to check and uncheck the check box. Everything is working fine but when I am move to next page in table then everything is unchecked but selectAll option is still checked . How to uncheck the header checkbox.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p-table #dtGrid [columns]="staticColumns" [value]="serviceIdData" 
      [styleClass]="'table'" scrollHeight="{{scrollHeight}}" [rows]="10" 
      [paginator]="true" (onRowSelect)="onRowSelect($event)" [pageLinks]="3" 
      (onRowUnselect)="onRowUnselect($event)" [rowsPerPageOptions]="[10,25,50,100]" 
      styleClass="table-light" (onHeaderCheckboxToggle)="handleHeaderCheckboxToggle($event)"
      [scrollable]="true"  [lazy]="true"  [(selection)]="selectedRecords"
       (onLazyLoad)="onLazyLoad($event);" [totalRecords]="totalRecords" scrollHeight="450px"  [responsive]="true"&gt;
          &lt;ng-template pTemplate="colgroup" let-columns&gt;
                &lt;colgroup&gt;
                    &lt;col *ngFor="let col of columns" [ngStyle]="{'width': col.width}"&gt;
                &lt;/colgroup&gt;
          &lt;/ng-template&gt;
          &lt;ng-template pTemplate="header" let-columns&gt;
              &lt;tr&gt;
                &lt;th role="columnheader" style="width:20px;"&gt;
                    &lt;p-tableHeaderCheckbox&gt;&lt;/p-tableHeaderCheckbox&gt;
                &lt;/th&gt;
                  &lt;th *ngFor="let col of columns" [pSortableColumn]="col.fieldName" (click)="placeSortIcon()"&gt;
                     &lt;div&gt;
                          &lt;span pTooltip={{col.tooltip}} tooltipPosition="top" [innerHtml]="col.label" [ngClass]="'ui-column-title'"&gt;&lt;/span&gt;
                          &lt;span *ngIf="dtGrid.sortField === col.fieldName" class="fa" [ngClass]="{'fa-sort-desc': dtGrid.sortOrder === -1, 'fa-sort-asc': dtGrid.sortOrder === 1}"&gt;&lt;/span&gt;
                    &lt;/div&gt;
                &lt;/th&gt;
              &lt;/tr&gt;
            &lt;/ng-template&gt;
            &lt;ng-template pTemplate="body" let-columns="columns" let-data&gt;
                &lt;tr [pSelectableRow]="data" [pSelectableRowDisabled]="data.moved"&gt;
                  &lt;td class="rowDataStyle" style="width:20px;"&gt;
                      &lt;span *ngIf="data.moved"&gt;&lt;img name="loading" src="assets/images/lock.png"&gt;&lt;/span&gt;
                      &lt;p-tableCheckbox [value]="data" [hidden]="data.moved" [disabled]="data.moved" binary="data.selected"&gt;&lt;/p-tableCheckbox&gt;   
                      &lt;!-- {{data.selected}} , {{data.moved}} --&gt;
                  &lt;/td&gt;
              &lt;td *ngFor="let column of columns"&gt;                    
                        &lt;span [ngClass]="'ui-cell-data'"&gt;
                           {{data[column.fieldName]}}&lt;/span&gt;                                     
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/ng-template&gt;
            &lt;ng-template pTemplate="emptymessage" let-columns&gt;
                &lt;tr&gt;
                    &lt;td [attr.colspan]="columns.length"&gt;
                        No records found
                    &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/ng-template&gt;
       &lt;/p-table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/BHKcu.png" rel="noreferrer">Checkbox still checked on moving to next page, click on this to see screenshot of the output table</a></p>