CODEWITHSUNDEEP
angularangular-material
Heena
Heena

Reputation: 1773

MatPaginator not working properly on deleting rows from MatTableDataSource

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

I have taken a button with the name Remove Selected Rows to delete the selected rows from the table.

But as a delete the selected rows , all the table data is being loaded which doesn't match with value specified for the pagination.

Below is the stack-blitz link for my code..

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

Below shown is the output.

Initially the table displays only the rows as specified for the pagination value.

enter image description here

But as I deleted the row 3 , all rows are being loaded even if the pagination value is only 3..

enter image description here

can anybody tell me how can I limit my table rows with the pagination value specified after deleting the rows.

Upvotes: 1

Views: 3146

Answers (2)

Bighnesh
Bighnesh

Reputation: 11

It's very simple after close of dialog to subscibe and call listing 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();
   });
}

Upvotes: 0

user4676340
user4676340

Reputation:

Here you go buddy.

You forgot to reassign the paginator to the datasource after deletion. Angular may do some magic, but sometimes it needs a little bit of help.

I use a timeout because I always face an issue, feel free to try without it. 

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

Upvotes: 6

Related Questions