You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
So when using a MatPaginator, there is an event you can bind to in order to tell when the page event has been clicked. However inside the source code (paginator.ts), that event is emitted at the end of the function:
_changePageSize(pageSize: number) {
// Current page needs to be updated to reflect the new page size. Navigate to the page
// containing the previous page's first item.
const startIndex = this.pageIndex * this.pageSize;
const previousPageIndex = this.pageIndex;
this.pageIndex = Math.floor(startIndex / pageSize) || 0;
this.pageSize = pageSize;
this._emitPageEvent(previousPageIndex);
}
This means that when using this page event you cannot do anything BEFORE the loading starts. I'm developing an app that uses rather large tables, and I want to be able to display a loading icon before the table starts updating so the app doesn't just hang. But when I show my loading icon in the (page) event, it only displays AFTER the table has finished updating and hangs for a long time. I've spent many hours trying to find a work around for this and haven't been able to figure anything out. Perhaps there is a reason as to why the line this._emitPageEvent(previousPageIndex); is here, but to my very amateurish eyes I feel like this could be solved by moving that line to the top.
Apologies in advance if this post doesn't follow the etiquette, I've not made many of these so I'm still learning.
Reproduction
Steps to reproduce:
Have a table with a very long dataset
Add a paginator
Bind the page event on the paginator
Have the page event do literally anything, let's say just write some text to the console
Change the page size on the paginator from the default 50 to the full table's length
Watch the console to see the app will hang until it finishes loading and only THEN do you see the text appear in the console.
Expected Behavior
I'd expect the page event to be fired first.
Actual Behavior
The page event is fired after.
Environment
Angular: 14.1.0
CDK/Material: 14.1.0
Browser(s): Edge
Operating System (e.g. Windows, macOS, Ubuntu): Windows
The text was updated successfully, but these errors were encountered:
Is this a regression?
The previous version in which this bug was not present was
No response
Description
So when using a MatPaginator, there is an event you can bind to in order to tell when the page event has been clicked. However inside the source code (paginator.ts), that event is emitted at the end of the function:
This means that when using this page event you cannot do anything BEFORE the loading starts. I'm developing an app that uses rather large tables, and I want to be able to display a loading icon before the table starts updating so the app doesn't just hang. But when I show my loading icon in the (page) event, it only displays AFTER the table has finished updating and hangs for a long time. I've spent many hours trying to find a work around for this and haven't been able to figure anything out. Perhaps there is a reason as to why the line
this._emitPageEvent(previousPageIndex);
is here, but to my very amateurish eyes I feel like this could be solved by moving that line to the top.Apologies in advance if this post doesn't follow the etiquette, I've not made many of these so I'm still learning.
Reproduction
Steps to reproduce:
Expected Behavior
I'd expect the page event to be fired first.
Actual Behavior
The page event is fired after.
Environment
The text was updated successfully, but these errors were encountered: