How to Pass Parameters in Angular Routes
💡 Concept Name
Route Parameters in Angular – A way to pass dynamic values through the URL to different components via Angular Router.
📘 Quick Intro
Route parameters let you create dynamic routes like /user/42, where 42 is a parameter passed to the route. These parameters can be accessed inside components using Angular’s ActivatedRoute service.
🧠 Analogy / Short Story
Think of a route parameter like a table reservation at a restaurant. When someone calls and says “Table for John”, you know which guest the reservation is for. Angular uses the route to determine what data to fetch for “John”.
🔧 Technical Explanation
- 🛤️ Route Configuration: Define a path with parameters using
:idsyntax. - 📥 Navigation: Navigate to the route using
[routerLink]ornavigate()with parameter values. - 🔍 Access Params: Use
ActivatedRoute.snapshot.paramMaporparamMap.subscribe()to read values. - 📌 Query Params: Pass key-value pairs like
?sort=ascusingqueryParams. - 🔄 Route Observables: Support real-time changes if parameters update.
🎯 Purpose & Use Case
- ✅ Load a user's profile page using their ID.
- ✅ Filter lists using query parameters like search terms or pagination.
- ✅ Enable deep linking for bookmarking specific pages with context.
💻 Real Code Example
// app-routing.module.ts
const routes: Routes = [
{ path: 'user/:id', component: UserProfileComponent }
];
// navigating via template
<a [routerLink]="['/user', 42]">View Profile</a>
// inside UserProfileComponent
constructor(private route: ActivatedRoute) { }
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
console.log('User ID:', id);
}
❓ Interview Q&A
Q1: How do you define a route with a parameter?
A: Use path: 'user/:id' in your route configuration.
Q2: How do you access route parameters in a component?
A: Use ActivatedRoute to read from paramMap.
Q3: What is the difference between snapshot and observable route access?
A: Snapshot gets a single value, observable listens to changes.
Q4: What is a query parameter?
A: A key-value pair added to the URL using ?, like ?page=1.
Q5: Can you pass multiple parameters in a route?
A: Yes, just add more segments like /user/:id/:action.
📝 MCQs
Q1. How do you define a dynamic route?
- Add routeGuard
- Use lazy loading
- Use :parameter in path
- Prefix with #id
Q2. Which service is used to access route params?
- Router
- HttpClient
- NgZone
- ActivatedRoute
Q3. How to navigate with a dynamic route?
- href='/user/id'
- [routerLink]=['/user', id]
- navigate(id)
- src='/user/id'
Q4. What does query param look like?
- :sort/desc
- #sort=desc
- ?sort=desc
- sort-desc
Q5. What is the benefit of observables for route params?
- Reduce load
- Encrypt ID
- Detect route changes
- Limit access
Q6. What is a real use of route params?
- Static about page
- Error 404
- User profile page
- Style sheet link
Q7. How are multiple params passed?
- Comma-separated
- As object
- In query string
- In sequence: /id/action
Q8. Are query params optional?
- No
- Yes
- Always required
- Only in lazy loading
Q9. How are params extracted with snapshot?
- params.id
- getParam()
- paramMap.get()
- route.query
Q10. What are route parameters useful for?
- Static routing only
- Animations
- Dynamic routing
- CSS
💡 Bonus Insight
You can combine route parameters and query parameters for complex filters like /products/category/5?page=2&sort=asc. Use ActivatedRoute.queryParamMap to retrieve query params.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!