Chapter 6.2☕ 16 min read

Route Parameters

Dynamic URLs that change based on data — menu/5, menu/42, menu/99 all use the same route.

01Why Route Parameters

Route parameters let you create dynamic URLs. /menu shows all biryanis, /menu/5 shows biryani #5, /menu/42 shows biryani #42.

"Route parameter = seat number — bus same hai, seat number alag."

Instead of creating a separate route for every biryani, you create ONE route with a parameter :id that changes based on the URL.

Two types of route parameters:

Path parameters — part of the URL path: /menu/:id
Query parameters — after the ? in URL: /menu?sort=price

02Path Parameters

Path parameters are defined with a colon (:) in the route path.

// Route definition
{ path: 'menu/:id', component: BiryaniDetailComponent }

// URL: /menu/42  →  id = '42'

Reading path params in the component (new signal way):

import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({...})
export class BiryaniDetailComponent {
  private route = inject(ActivatedRoute);

  // New way — signal-based (no unsubscribe needed!)
  id = this.route.paramMap.signal()('id');

  // Old way — subscribe (need to unsubscribe)
  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      const id = params.get('id'); // '42' as string
    });
  }
}

"paramMap = ticket checker — ID nikal ke de deta hai."

Note: params.get('id') returns a string — if you need a number, use +params.get('id') or Number().

03Multiple Path Parameters

You can have multiple path parameters in a single route for nested resources.

// Route with multiple params
{ path: 'restaurant/:rId/menu/:mId', component: MenuItemComponent }

// URL: /restaurant/3/menu/7
// rId = '3', mId = '7'

// Reading multiple params
const rId = this.route.paramMap.signal()('rId'); // '3'
const mId = this.route.paramMap.signal()('mId'); // '7'

"Multiple parameters = flat number + wing number — dono chahiye exact address ke liye."

The URL structure /restaurant/3/menu/7 clearly shows the hierarchy: restaurant 3 has menu item 7.

04Query Parameters

Query parameters appear after ? in the URL. They are optional and don't change which route matches.

// URL: /menu?sort=price&order=asc

// Setting query params in template
<a [routerLink]="['/menu']"
   [queryParams]="{ sort: 'price', order: 'asc' }">
  Sort by Price
</a>

// Reading query params (new signal way)
const sort = this.route.queryParamMap.signal()('sort'); // 'price'

// Old way
this.route.queryParamMap.subscribe(params => {
  const sort = params.get('sort'); // 'price'
});

"Query params = filters — optional hai, route change nahi hoti."

Path params change the route (/menu/5 vs /menu/3). Query params don't — /menu?sort=price and /menu are the same route.

05Required vs Optional Parameters

Understanding when to use path params vs query params is key to clean URL design.

Path parameters (REQUIRED):

Identity: which item? /menu/:id
Required for the page to make sense
Without them, the route doesn't match

Query parameters (OPTIONAL):

Preferences: how to show? /menu?sort=price
Optional — page works without them
Same route, different view settings

"Path param = Aadhaar number mandatory, Query param = preference optional."

Use path for identity (which item to show), query for filtering (how to show it).

Key Takeaways

✅ Path params (/:id) are dynamic URL segments defining the resource identity
✅ Query params (?sort=price) are optional filters that don't change the route
✅ Read params with route.paramMap.signal()('id') — new signal way, no unsubscribe
✅ Multiple path params create a URL hierarchy: /restaurant/:rId/menu/:mId
✅ Component reuses on same-route navigation — use signal() not snapshot for updates

Previous6.1 — Basic Routing 📋 All Chapters Next Chapter6.3 — Child Routes →