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 {
          // tslint:disable-next-line:max-line-length
          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() {
        // tslint:disable-next-line:max-line-length
        let endIndex: number;
        // tslint:disable-next-line:max-line-length
        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 {
          // tslint:disable-next-line:max-line-length
          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

Is it possible to select all for each page of an angular material table.

Yes; upon selection of the selectAll button, the function masterToggle() is called, which loops through all the rows and then calls the built-in function this.selection.select(row)... here, you would have to change this masterToggle() function to only run for the rows which are present on your page.

You didn't include a MVCE, so this HTML that i added on top of boilerplate code which can help visualize the selection... see it in action on working stackblitz here:

Total selected: {{selection?.selected?.length}}

Answer 3

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;
      }