In this simple stackblitz, there are only 4 initial rows and the pagination section shows only 1 page. Now, when I add rows dynamically after every 3 seconds, then also the pagination section shows a single page no matter how many rows I add. How to keep pagination in sync with table data?
Since arrays are passed by reference even if we add new data that reference is not changing, Try using spread operator to add new value to array.
setInterval(() => {
const newData = {
albumId: 25000,
id: 24000,
title: 'zaalim haakim',
url: 'google.com',
thumbnailUrl: 'google.com',
};
this.products = [...this.products,newData];
}, 3000);
OR
As mentioned by @Arnaud Denoyelle in the comment you can use Viewchild to get table instance and call reset on it to update paginator state
@ViewChild(Table) table: Table;
setInterval(() => {
const newData = {
albumId: 25000,
id: 24000,
title: 'zaalim haakim',
url: 'google.com',
thumbnailUrl: 'google.com',
};
this.table.reset();
}, 3000);