mat-checkbox Selection: how to apply selection only to the current page in Angular Material Table? - angular-material-table

Question

I am working on Angular Material Table where I am using pagination with a selection when I click on the checkbox its selects all the rows of the data table
I want to select only the rows that are on the currently selected page.
Below is the link for on stackblitz
https://stackblitz.com/edit/angular-ssv6fc-k34hn6?file=app/table-selection-example.ts
tableData.component.ts
import {
SelectionModel
} from '#angular/cdk/collections';
import {
Component,
OnInit,
ViewChild
} from '#angular/core';
import {
MatTableDataSource,
MatPaginator
} from '#angular/material';
import {
MatDialog,
MatDialogRef,
MAT_DIALOG_DATA
} from '#angular/material';
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
export interface PeriodicElement {
position: number;
name: string;
weight: number;
symbol: string;
}
#Component({
selector: 'table-selection-example',
styleUrls: ['table-selection-example.css'],
templateUrl: 'table-selection-example.html',
})
export class TableSelectionExample {
dataSource: any = [{
position: 1,
name: 'Hydrogen',
weight: 1.0079,
symbol: 'H'
},
{
position: 2,
name: 'Helium',
weight: 4.0026,
symbol: 'He'
},
{
position: 3,
name: 'Lithium',
weight: 6.941,
symbol: 'Li'
},
{
position: 4,
name: 'Beryllium',
weight: 9.0122,
symbol: 'Be'
},
{
position: 5,
name: 'Boron',
weight: 10.811,
symbol: 'B'
},
{
position: 6,
name: 'Carbon',
weight: 12.0107,
symbol: 'C'
},
{
position: 7,
name: 'Nitrogen',
weight: 14.0067,
symbol: 'N'
},
{
position: 8,
name: 'Oxygen',
weight: 15.9994,
symbol: 'O'
},
{
position: 9,
name: 'Fluorine',
weight: 18.9984,
symbol: 'F'
},
{
position: 10,
name: 'Neon',
weight: 20.1797,
symbol: 'Ne'
},
{
position: 11,
name: 'Carbon',
weight: 12.0107,
symbol: 'C'
},
{
position: 12,
name: 'Nitrogen',
weight: 14.0067,
symbol: 'N'
},
{
position: 13,
name: 'Oxygen',
weight: 15.9994,
symbol: 'O'
},
{
position: 14,
name: 'Fluorine',
weight: 18.9984,
symbol: 'F'
},
{
position: 15,
name: 'Neon',
weight: 20.1797,
symbol: 'Ne'
},
];
displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
selection = new SelectionModel < PeriodicElement > (true, []);
#ViewChild(MatPaginator) paginator: MatPaginator;
showPagination: boolean = false;
public array: any;
public pageSize = 5;
public currentPage = 0;
positionValue = [];
public totalSize = 0;
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.array = this.dataSource;
this.totalSize = this.array.length;
this.iterator();
console.log(this.dataSource, "dataSoucr")
}
getData() {
}
//function for pagination
private iterator() {
const end = (this.currentPage + 1) * this.pageSize;
const start = this.currentPage * this.pageSize;
const part = this.array.slice(start, end);
this.dataSource = part;
console.log(this.dataSource, "dataSoucr")
if (this.array.length == 0) {
this.currentPage = this.currentPage - 1;
const end = (this.currentPage + 1) * this.pageSize;
const start = this.currentPage * this.pageSize;
const part = this.array.slice(start, end);
this.dataSource = part;
}
}
public handlePage(e: any) {
this.currentPage = e.pageIndex;
this.pageSize = (e.pageSize != undefined) ? e.pageSize : this.pageSize;
this.iterator();
}
/** Whether the number of selected elements matches the total number of rows. */
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.length;
this.dataSource.forEach(item => {
this.positionValue.push(item.position); // here i need only selected position number not all rows
})
console.log(this.positionValue, "value")
return numSelected === numRows;
}
/** Selects all rows if they are not all selected; otherwise clear selection. */
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.forEach(row => this.selection.select(row));
}
}
tableData.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
</tr>
</table>
<mat-paginator #paginator class="mat-paginator-sticky" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize" [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
</mat-paginator>
In tableData.component.ts there is a functionality for pagination as well as for selection
I also tried to bind with index in a header in data table but found no ways to do it.
Please help with this issue.