Angular: Reading URL Query Parameters
Angular gives you two ways to read URL query params: a static snapshot for the initial value, or a queryParams Observable for live updates. Use it for values like ?search=term.
Why it exists
Applications need to reflect state in the URL for bookmarking and sharing. Query parameters, the part after the ? like page=2, are a standard way to do this. Angular's router provides a structured API to access these values within your components.
The mental model
Think of Angular's ActivatedRoute service as giving you two views of the URL's query parameters. The snapshot is a static photo, taken once when the component is created. The queryParams property is a live video feed (an Observable) that notifies you every time the parameters change.
How it works
First, inject ActivatedRoute into your component's constructor: constructor(private route: ActivatedRoute) {}. To get a one-time value, access this.route.snapshot.queryParams['yourParam']. For live updates, which is the safer and recommended approach, subscribe to the observable: this.route.queryParams.subscribe(params => { const latestValue = params['yourParam']; / do something / });.
When to use it
Always prefer the queryParams Observable when a component might be reused by the router. This happens when you navigate between routes that render the same component, like from /users?status=active to /users?status=inactive. Use the snapshot only if you are certain the component will be destroyed and recreated on every navigation, as it's slightly simpler for a one-time read.
When not to use it
Never put sensitive data like tokens or passwords in query parameters, as they are visible in the URL, browser history, and server logs. Also, do not confuse query parameters (?key=value) with route parameters (/users/:id), which are part of the URL path and accessed via route.params instead of route.queryParams.
One canonical example
In a ProductListComponent that filters by category using a URL like /products?category=electronics, reading this.route.snapshot.queryParams['category'] in ngOnInit will only work the first time. If the user then clicks a link that navigates to /products?category=apparel, the same component is reused, but the snapshot won't update. The correct implementation subscribes to this.route.queryParams so that whenever the category changes, the subscription fires and the component can fetch and display the new list of products.
Interview question
When is it most appropriate to use ActivatedRoute.queryParams (Observable) to access URL query parameters?
- a.For simpler, one-time reads of query parameters during component initialization.
- b.When the component is guaranteed to be destroyed and re-created on every navigation.
- c.When the query parameters are part of the URL path, like /users/:id.
- d.When you need to react to changes in query parameters while the same component instance is active.Correct
Why? this is the answer
The `queryParams` Observable provides live updates, making it ideal for components that are reused by the router and need to react to parameter changes without being re-instantiated. The `snapshot` (options A and D) is for one-time reads when the component is certain to be destroyed and re-created, while option C describes route parameters, not query parameters.
Just read this? Test yourself on what you have been reading.
Read the original → angular.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on angular — each one lists the topics its interview covers.
See open roles