select 的复选框 angular 底漆表中的所有复选框

Question

When I click on the checkbox in the table header. Then all the checkboxes in the table should be checked. Currently, I'm using angular 12 and primeNG table.

<p-table styleClass="text-sm" [value]="value" [loading]="loading" [rowHover]="true" [scrollable]="true" scrollDirection="both" class="p-element p-datatable-gridlines" (onLazyLoad)="onLazyLoad.emit($event)" [ngClass]="{'p-datatable-is-loading': loading}"
  [paginator]="true" [rows]="10" [showCurrentPageReport]="true" responsiveLayout="scroll"
  currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[10,20,30]"
  onPage="handlePageChange($event)">

  <ng-template pTemplate="header">
    <tr>

      ///////////////////// HERE THE CHECKBOX IN TABLE HEARDER///////////////////////////////
      <th *ngIf="status!='all'" style="width: 40px" pFrozenColumn class="border-right-none">
        <p-checkbox value="{{value.id}}" [(ngModel)]="selectedLeaves" (onChange)="allSelect(value)"></p-checkbox>
      </th>

      <th *ngIf="state!=_componentState.VIEW" style="width: 30px" pFrozenColumn class="border-right-none"></th>
      <th style="width: calc(358px / 2)" pFrozenColumn class="border-left-none">From</th>
      <th style="width: calc(358px / 2)" pFrozenColumn class="p-frozen-column-last border-right-none">To</th>
      <th style="width: 180px">Department</th>
      <th pSortableColumn="created_at" style="width: 100px">Date Field<p-sortIcon field="created_at"></p-sortIcon></th>
      <th style="width: 100px" class="border-left-none">Day</th>
      <th style="width: 180px">Employee Name</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-leave let-rowIndex="rowIndex">
    <tr [class]="{'passed-date': helper.isPassedCurrentDate(leave.leave_from)}" (dblclick)="handleDblClickRow(leave)">

///////////////////// HERE THE CHECKBOX IN TABLE DETAILS///////////////////////////////
      <td  *ngIf="status!='all'" style="width: 40px" pFrozenColumn class="border-right-none">
        <div *ngIf="status!='all'">
          <p-checkbox name="group1" value="{{leave.id}}" [(ngModel)]="selectedLeaves" inputId="ch"></p-checkbox>
        </div>
      </td>

      <td  *ngIf="state!=_componentState.VIEW" style="width: 30px" pFrozenColumn class="border-right-none">
        <div *ngIf="state==_componentState.ALL">
          <div class="{{leave.status}}-dot"></div>
        </div>
      </td>
      <td style="width: calc(358px / 2)" pFrozenColumn class="border-left-none">{{helper.formatDate(leave.leave_from, 'MMM D, YYYY HH:mm', false)}}</td>
      <td style="width: calc(358px / 2)" pFrozenColumn class="p-frozen-column-last border-right-none">{{helper.formatDate(leave.leave_to, 'MMM D, YYYY HH:mm', false)}}</td>
      <td style="width: 180px"></td>
      <td style="width: 100px" class="border-left-none">{{helper.formatDate(leave.created_at, 'MM/DD')}}</td>
      <td style="width: 100px">{{helper.formatDate(leave.created_at, 'ddd')}}</td>
      <td style="width: 180px" class="text-capitalize">{{leave.employee_name}}</td>
    </tr>
  </ng-template>

I want to use this method allSelect(value) As an example, When I click on the tabletop checkbox then automatically all checkboxes should be checked. I don't want to use primeNG table selection.

https://stackblitz.com/edit/primeng-tableselection-demo You can check it from this example

Answer 1

different points to select all checkbox value according to a header checkbox

1. use ngModel of header checkbox to recover the checked value
2. each checkbox should have their own ngModel

your code became:

on header

 <th *ngIf="status!='all'" style="width: 40px" pFrozenColumn class="border-right-none">
    <p-checkbox value="{{value.id}}" [(ngModel)]="selectedLeaves" (onChange)="allSelect()"></p-checkbox>
 </th>

Checkbox list

 <td  *ngIf="status!='all'" style="width: 40px" pFrozenColumn class="border-right-none">
        <div *ngIf="status!='all'">
          <p-checkbox name="group1" value="{{leave.id}}" [(ngModel)]="group1SelectedLeaves" inputId="ch"></p-checkbox>
        </div>
      </td>

In controller

group1SelectedLeaves = boolean = false;

allSelect() {
   group1SelectedLeaves = this.selectedLeaves;
}

Answer 2

        Here are steps to achieve what you wanna, if I got your question correctly.
        
        <p-table #table [columns]="columns" [value]="dataSourceData" [lazy]="false" [showCurrentPageReport]="true"
          [paginator]="true" paginatorDropdownAppendTo="body" [rows]="pageSize" [totalRecords]="totalRecords"
          dataKey="Id" sortMode="single" filterDelay="0"
          [rowsPerPageOptions]="rowsPerPageOptions" [responsive]="true" selectionMode="multiple"
          [(selection)]="selectedDataRows" class="datatable-container">
          <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
              <col *ngFor="let col of columns" [style.width]="col.width" />
            </colgroup>
          </ng-template>
          <ng-template pTemplate="header" let-columns>
            <tr>
              <th *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="!col.sortable">
                <a href="#" *ngIf="col.isRowSelector" (click)="selectAll($event)">{{ col.header}}</a>
                <span *ngIf="!col.isRowSelector" [pTooltip]="col.header" tooltipPosition="top">{{ col.header }}</span>
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
            <tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex" class="table-row">
              <td *ngFor="let col of columns" class="text-truncate" [ngSwitch]="col.field"
                [pTooltip]="col.tooltip ? col.tooltip(rowData[col.field]) : rowData[col.field]" tooltipPosition="top">
                <p-tableCheckbox *ngIf="col.isRowSelector" [pSelectableRow]="rowData" [value]="rowData"></p-tableCheckbox>
                <span *ngIf="!col.isRowSelector">{{ rowData[col.field] }}</span>
              </td>
            </tr>
          </ng-template>
        </p-table>
    
    and in your code
    1- define your columns
     columns: Array<IColumn> = [
        { field: 'selectAll', header: 'Select All', sortable: false, width: '12%', isRowSelector: true }
    ];

    2- Add SelectAll Method

 selectAll(event: PointerEvent): void {
    event.preventDefault()
    this.selectedDataRows = this.dataSourceData.slice();
  }

So When clicking the select all button, all the data-source items will be captured into a new object "selectedDataRows" which is passed to the table as its selection property.

hopefully, this works for you.