MatPaginator not working properly on deleting rows

Question

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.

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

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

Answer 1

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