https://DOMAIN_NAME/employee/all?pageIndex=5&pageSize=10&sortDirection=asc&sortBy=salary
https://DOMAIN_NAME/employee/all;pageIndex=5;pageSize=10;sortDirection=asc;sortBy=salary
https://DOMAIN_NAME/employee/all?pageIndex=5&pageSize=10&searchText=&sortDirection=asc&sortBy=salary
const urlTree = this.router.createUrlTree(['/employee/all',params]);
https://DOMAIN_NAME/employee/all;pageIndex=5;pageSize=10;searchText=;sortDirection=asc;sortBy=salary
https://DOMAIN_NAME/employee/all?pageIndex=5&pageSize=10&searchText=&sortDirection=asc&sortBy=salary
Query Params vs Route Params
Two main approaches exist for persisting state in the URL: query parameters and route parameters. Query parameters follow the standard URL convention, beginning with "?" and separating multiple values with "&". Route parameters function similarly but use a single separator like ";" which can be customized.
Both methods are viable for your project. I tend to prefer query parameters because of their widespread usage and familiarity.
Overview
This guide demonstrates how to preserve Angular Material table configurations—including sorting column, sort order, page size, page index, and search text—within the URL. If a user navigates away and returns via the browser's back button, they'll find the table exactly as they left it. This technique extends beyond tables to inputs, tab selections, and other interactive elements.
In our example, the all-employees component renders a list of employees in a Material table with support for:
- Sorting
- Filtering
- Pagination
Updating the URL
The all-employees component configures its data source, populates data, and assigns paginator and sorter instances. The methodupdateRouteParameters() function subscribes to all table events and captures user interactions.
Whenever a user modifies the sort order, applies a filter, or adjusts pagination settings, this method updates the URL accordingly. The resulting URL reflects all current selections.
For route parameters instead, a minor adjustment at line 15 of the code achieves the same result. The URL format then changes to use the route parameter syntax.
Loading the Page with Stored Selections
When the page reloads or the URL is opened in a new tab, the table must restore its previous state. The mapTableData() method populates the data source and configures the table based on any parameters present in the URL.
For instance, accessing a URL like the example below will restore the table to the specified state: page 5 with a page size of 10, sorted by the Salary column in ascending order. To achieve this, the code inspects these parameters and adjusts the data source accordingly.
The complete implementation is available on StackBlitz. Happy coding!