How Do You Read Query Parameters in Angular
💡 Concept Name
Query Parameters in Angular – These are key-value pairs passed in the URL after a ? and are commonly used for filtering, pagination, or navigation logic.
📘 Quick Intro
Angular provides the ActivatedRoute service to access query parameters in components. You can either read them once using snapshot or reactively with queryParams observable.
🧠 Analogy / Short Story
Think of query parameters like custom instructions written on a postcard. The main address takes you to the destination, and the query parameters tell you what exactly to do when you get there.
🔧 Technical Explanation
- 🔑 Query Params: Appear in the URL after a
?like?page=2&filter=active. - 🧭 ActivatedRoute: Injected into the component to access routing data.
- 📸 Snapshot: Provides a one-time read of query parameters.
- 📡 Observable: Allows reactive access using
queryParams.subscribe(). - 🔁 Router Navigation: Can also set query parameters programmatically with the Router.
🎯 Purpose & Use Case
- ✅ Filter or sort lists dynamically (e.g., ?sort=desc).
- ✅ Maintain navigation state (e.g., ?tab=profile).
- ✅ Pass state between pages without services.
- ✅ Deep linking and SEO-friendly URLs.
💻 Real Code Example
// app.component.ts
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
ngOnInit() {
// Snapshot approach
const page = this.route.snapshot.queryParamMap.get('page');
console.log('Page:', page);
// Observable approach
this.route.queryParams.subscribe(params => {
console.log('Filter:', params['filter']);
});
}
}
❓ Interview Q&A
Q1: What are query parameters in Angular?
A: They are key-value pairs in the URL used to pass extra data to routes.
Q2: How do you access query parameters in a component?
A: By injecting ActivatedRoute and using snapshot or queryParams.
Q3: What's the difference between snapshot and observable query params?
A: Snapshot reads once; observable lets you track changes.
Q4: Can you navigate programmatically with query params?
A: Yes, using the Router’s navigate method with a queryParams object.
Q5: Why use query params over route params?
A: Query params are optional and better for filters or UI state.
📝 MCQs
Q1. Which Angular service is used to read query parameters?
- RouterModule
- ActivatedRoute
- HttpClient
- RouteGuard
Q2. What method gets query param once?
- queryParams.get()
- snapshot.paramMap.get()
- snapshot.queryParamMap.get()
- route.value()
Q3. How do you track query parameter changes?
- Use ngModel
- Use snapshot
- Subscribe to queryParams
- Use RouterLink
Q4. Which URL format has query params?
- /users/id
- ?page=1
- #anchor
- /product/42
Q5. What can query parameters be used for?
- Authentication only
- Routing guards
- Sorting, filtering, pagination
- Header management
Q6. Can query parameters be changed programmatically?
- No
- Yes
- Only once
- Only in URL bar
Q7. Which Angular module supports routing?
- FormsModule
- CommonModule
- RouterModule
- NgModel
Q8. What triggers queryParams observable?
- Template update
- Click event
- URL query change
- Service call
Q9. Are query parameters required in a route?
- Yes
- No
- Always
- Depends on guard
Q10. Which is true about ActivatedRoute?
- Handles forms
- Manages HTTP
- Used to access route and query data
- Styles components
💡 Bonus Insight
You can combine both route parameters and query parameters to pass complex data structures in Angular navigation, ensuring both flexibility and clean URLs for SEO and state management.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!