How do you pass parameters in Angular routes?

Angular allows passing route parameters using path segments like '/user/:id'. These can be accessed in the component via ActivatedRoute's paramMap.

How do you read query parameters in Angular?

Use ActivatedRoute.queryParamMap to access query parameters like '?page=2' in Angular components.

How to Pass Parameters in Angular Routes | FullStackPrep.Dev

💡 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 :id syntax.
📥 Navigation: Navigate to the route using [routerLink] or navigate() with parameter values.
🔍 Access Params: Use ActivatedRoute.snapshot.paramMap or paramMap.subscribe() to read values.
📌 Query Params: Pass key-value pairs like ?sort=asc using queryParams.
🔄 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!

📄 PDF Download Coming Soon

How to Pass Parameters in Angular Routes