Select all of current page per page for Angular Material table

Question

Is it possible to select all for each page of an angular material table. I have it set where the first page can select all of the current items displayed which is 10.

I have several more pages of data and if I go to the next page, the select all checkbox is checked but I don’t know how to have a checkbox that adds on top of each page if a check box is checked.

For example of the desired outcome : First, I select all on the first current page (which selects 10) I go to the next page which uses mat pagination, and the select all checkbox should be not checked and if I select all on this page, these 10 would be selected for a total of 20 checked rows.

Answer 1

We have to modify the implementation of isAllSelected, masterToggle and introduction of new method selectRows with logic of selecting the current page rows.

So Inside selectRows() method, we have to put the logic of getting the starting index and endIndex till when we have to select the data on current page based on current page Index and size with dataSource length.

Please find the logic with code which I have implemented in my project.

    /** Whether the number of selected elements matches the total number of rows. */
      isAllSelected() {
        const numSelected = this.selection.selected.length;
        const page = this.dataSource.paginator.pageSize;
        let endIndex: number;
        // First check whether data source length is greater than current page index multiply by page size.
        // If yes then endIdex will be current page index multiply by page size.
        // If not then select the remaining elements in current page only.
        if (this.dataSource.data.length > (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize) {
          endIndex = (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize;
        } else {
          endIndex = this.dataSource.data.length - (this.dataSource.paginator.pageIndex * this.dataSource.paginator.pageSize);
        }
        return numSelected === endIndex;
      }

      /** Selects all rows if they are not all selected; otherwise clear selection. */
      masterToggle() {
        this.isAllSelected() ?
          this.selection.clear() : this.selectRows();
      }

      selectRows() {
        let endIndex: number;
        if (this.dataSource.data.length > (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize) {
          endIndex = (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize;
        } else {
          endIndex = this.dataSource.data.length;
        }
        
        for (let index = (this.dataSource.paginator.pageIndex * this.dataSource.paginator.pageSize); index < endIndex; index++) {
          this.selection.select(this.dataSource.data[index]);
        }
      }

Answer 2

For this example https://stackblitz.com/edit/angular-mat-table-checkbox-select-all-kolml5?file=app%2Ftable-selection-example.html

I just added this one for .html

    <mat-checkbox (change)="$event ? selectRows() : null"
    [checked]="selection.hasValue() && isSelectedPage()"
    [indeterminate]="selection.hasValue() && !isSelectedPage()"
    >all in this page</mat-checkbox>

and for .ts : there are two functions to be added

     selectRows() {
        let endIndex: number;
          if (this.isSelectedPage() ) {
            this.selection.clear(); 
          } else {
    if (this.dataSource.data.length > (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize) {
          endIndex = (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize;
        } else {
          endIndex = this.dataSource.data.length;
        }
        for (let index = (this.dataSource.paginator.pageIndex * this.dataSource.paginator.pageSize); index < endIndex; index++) {
          this.selection.select(this.dataSource.data[index]);
        }
          }
      }

     isSelectedPage() {
        const numSelected = this.selection.selected.length;
        const page = this.dataSource.paginator.pageSize;
        let endIndex: number;
        if (this.dataSource.data.length > (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize) {
          endIndex = (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize;
        } else {
          endIndex = this.dataSource.data.length - (this.dataSource.paginator.pageIndex * this.dataSource.paginator.pageSize);
        }
      
        return numSelected === endIndex;
      }