36. Optional Parameters and Query Parameters
Besides required route parameters (e.g., /user/:id), Angular routing supports two ways to handle optional data passed through the URL: Optional Matrix Parameters and Query Parameters.
1. Optional Matrix Parameters
These are useful for passing configuration to a specific route segment (e.g., /products;filter=sale;sort=price).
Navigation
typescript // Pass matrix parameters via an object in the path array this.router.navigate(['/products', { filter: 'sale', sort: 'price' }]);
Accessing
Matrix parameters are accessed via the paramMap on the ActivatedRoute, just like required parameters.
typescript const filter = this.route.snapshot.paramMap.get('filter'); // 'sale'
2. Query Parameters
Query parameters (e.g., /search?q=angular&page=2) are typically used for filtering, sorting, or pagination, as they apply globally to the route and its children.
Navigation
Query parameters are passed using the queryParams object in the navigation options.
typescript this.router.navigate(['/search'], { queryParams: { q: 'angular', page: 2 } });
Accessing
Query parameters are accessed via the queryParamMap Observable of ActivatedRoute.
typescript
// component.ts
ngOnInit(): void {
this.route.queryParamMap.subscribe(params => {
const query = params.get('q');
const page = params.get('page');
console.log(Search for '${query}' on page ${page});
});
}
Note: Query parameters (via queryParamMap) are strongly preferred over matrix parameters because they are simpler to manage and more conventional for search/filter functionalities.