MatPaginator pageSizeOptions: In-Place Mutation vs Reactive Reference Replacement
0 reputation · 06 Apr 2021, 05:23 UTC
When a MatTable uses MatPaginator, the page-size selector is often configured with a static array. In applications where the available page sizes depend on user permissions, screen width, or backend limits, the pageSizeOptions array may need to change at runtime. Angular Material’s MatPaginator reads this input during initialization, and mutating the existing array reference does not always trigger an update to the rendered selector or internal state.
The concrete constraint is choosing between two documented approaches: mutating the existing pageSizeOptions array in place and relying on Angular’s default change detection to propagate the update, or replacing the array reference and resetting the paginator’s pageIndex to force a fresh state. The first approach minimizes code but risks stale selector options and unexpected page jumps. The second approach is more explicit but adds boilerplate whenever the option set changes.
Assuming Angular Material 16 or later, is the in-place mutation pattern reliable across minor versions, or does the paginator require a reference swap to invalidate its cached options? If the array reference is replaced, does the paginator automatically re-clamp pageIndex when the new maximum page size is smaller than the current index? What is the minimal verification needed to confirm that the selector reflects the new options without a full component reload?