MatPaginator does not work properly when deleting rows from MatTableDataSource

Question

I created a table with selection and pagination in angular 2 using angular material.

I took a button called Delete Selected Rows to remove selected rows from the table.

But as a deletion of the selected rows, all the data in the table is loaded that does not match the value specified for pagination.

Below is a stack link for my code.

https://stackblitz.com/edit/delete-rows-mat-table-vj4hbg?file=app%2Ftable-selection-example.html

The output is shown below.

At the beginning, the table displays only the rows specified for the pagination value.

But as I deleted line 3, all lines are loaded, even if the pagination value is only 3 ...

can someone tell me how can I limit my table rows to the page value specified after deleting the rows.

Answer 1

Here you are, buddy.

You forgot to reassign the paginator to the data source after deletion. Angular can do wonders, but sometimes it needs help.

I use timeout because I always run into a problem, feel free to try without it.

setTimeout(() => { this.dataSource.paginator = this.paginator; }); 

Answer 2

It is very simple after closing the dialog for subscribing and calling the list API

 openDialog(requestId): void { //this.abc=requestId; const dialogRef = this.dialog.open(DialogOverviewExampleDialog, { disableClose: true, width: '400px', data: { name: this.name, animal: this.animal, sendtochild: requestId } }); dialogRef.afterClosed().subscribe(result => { this.getUserList(); }); }