Route Parameters - Pass Dynamic Data, Optional Route Params

Route params are very similar to query parameters, which we discussed in the previous part.

However, route params are cleaner, more readable, and more SEO-friendly.


What are Route Parameters?

Route parameters allow you to pass dynamic data through the URL path from one page to another.

You might say:

“We already did this using query params.”

Yes, that’s correct — query params and route params serve the same purpose, but the way data appears in the URL is different.


Query Params vs Route Params

Query Params Example:

/profile?id=1&name=Anil&age=29

Problems:

  1. Not very readable
  2. Not SEO-friendly


Route Params Example:

/profile/Anil/29

Benefits:

  1. Clean URL
  2. Better readability
  3. SEO-friendly


Drawback of Route Params

One small issue with route params is that you cannot easily identify what a value represents just by looking at it.

For example:

/profile/Anil/29
  1. Is 29 an age, ID, or house number?
  2. This clarity exists in query params but not in route params

Even then, route params are preferred due to cleaner URLs.


Step 1: Define Route Params in Routes File

Go to app.routes.ts and define route params using :.

export const routes = [
{ path: 'about', component: AboutComponent },
{ path: 'about/:name', component: AboutComponent },
{ path: 'about/:name/:age', component: AboutComponent }
];

Now your app supports:

  1. /about
  2. /about/Anil
  3. /about/Anil/29


Step 2: Pass Route Params using RouterLink (Static)

home.html

<a routerLink="/about/Anil">Go to About</a>
<br>
<a [routerLink]="['/about', 'Sam']">Go to About</a>

Without route params, the page will not open because Angular expects required params.


Step 3: Pass Route Params using RouterLink (Dynamic)

home.ts

userData = signal({
name: 'Sidhu',
age: 29
});

home.html

<a [routerLink]="['/about', userData().name, userData().age]">
Go to About
</a>

Now route params are passed dynamically.


Step 4: Read Route Params using ActivatedRoute

Go to about.ts.

import { ActivatedRoute } from '@angular/router';

export class AboutComponent {
username = signal('');
age = signal('');

constructor(public route: ActivatedRoute) {}

ngOnInit() {
this.route.params.subscribe(params => {
this.username.set(params['name']);
this.age.set(params['age']);
});
}
}


Step 5: Display Route Params in HTML

about.html

<h1>This is About {{ username() }}</h1>
<h2>User Age is {{ age() }}</h2>


Step 6: Pass Route Params on Button Click

home.ts

import { Router } from '@angular/router';

constructor(public router: Router) {}

goToAbout() {
this.router.navigate(['about', 'Peter', 22]);
}

home.html

<button (click)="goToAbout()">Go to About</button>


Making Route Params Optional (Important)

Route params cannot be optional by default.

To make them optional, we define multiple routes:

{ path: 'about', component: AboutComponent },
{ path: 'about/:name', component: AboutComponent },
{ path: 'about/:name/:age', component: AboutComponent }

This allows:

  1. No params
  2. One param
  3. Multiple params

Do not add empty slashes (/) — it will break routing.