Routing & Navigation

Angular Query Parameters

Query parameters carry optional state such as filters, sorting and pagination. They survive navigation, appear in the URL and make the current view shareable and bookmarkable.

What is Query Parameters in Angular?

Query parameters carry optional state such as filters, sorting and pagination. They survive navigation, appear in the URL and make the current view shareable and bookmarkable.

Query Parameters example

Reading and writing the query string

TypeScript

// read reactively
this.route.queryParamMap.subscribe(params => {
  this.city = params.get('city') ?? 'All';
  this.page = Number(params.get('page') ?? 1);
});

// write without losing existing params
this.router.navigate([], {
  relativeTo: this.route,
  queryParams: { page: 3 },
  queryParamsHandling: 'merge',
});

Key points to remember

queryParamsHandling: "merge" keeps existing parameters; "preserve" keeps them across a route change.
Keeping filters in the URL makes the back button and shared links behave correctly.
Values are always strings.

Common mistakes with Query Parameters

Replacing the whole query string and losing unrelated filters.
Keeping filter state only in a component, so a refresh loses it.

Angular Query Parameters— Interview Questions & FAQs

Should filters live in component state or the URL?+

In the URL. It makes the view shareable, restores correctly on refresh, and makes the back button behave the way users expect.