Dynamic Routing - Route Params & Dynamic Pages

Dynamic routing is used when we need to open different pages for different users using the same route.

It works using route parameters.


Example:

When we click on different users, a new page opens and shows that user’s details like name, email, city, etc.

The data is coming from a service, not written statically.


Why Dynamic Routing is Needed

In real applications, we cannot create a separate route for every user.

If there are many users or students, we pass an ID or name in the route and show details based on that.

This is called dynamic routing or dynamic pages.


Components Used

Two components are created:

  1. Users page (user list)
  2. User Details page (single user details)


Create Components

ng g c pages/users
ng g c pages/user-details


Create Service for User Data

ng g s services/user


User Service (user.service.ts)

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class UserService {

userList() {
return [
{ id: 1, name: 'Anil', email: 'anil@ss.com', city: 'Delhi' },
{ id: 2, name: 'Peter', email: 'peter@ss.com', city: 'Mumbai' },
{ id: 3, name: 'Sam', email: 'sam@ss.com', city: 'Pune' },
{ id: 4, name: 'Bruce', email: 'bruce@ss.com', city: 'Chennai' },
{ id: 5, name: 'Tony', email: 'tony@ss.com', city: 'Bangalore' }
];
}
}


Routes (app.routes.ts)

import { Routes } from '@angular/router';
import { Users } from './pages/users/users';
import { UserDetails } from './pages/user-details/user-details';

export const routes: Routes = [
{ path: 'users', component: Users },
{ path: 'user-details/:id', component: UserDetails }
];

/:id is used for dynamic routing.


Users Component (users.ts)

import { Component, signal } from '@angular/core';
import { UserService } from '../../services/user-service';
import { RouterLink } from '@angular/router';

@Component({
selector: 'app-users',
imports: [RouterLink],
templateUrl: './users.html',
styleUrl: './users.css',
})
export class Users {
userData:any=signal("");
constructor(public userService:UserService){}
ngOnInit(){
const data =this.userService.userList();
this.userData.set(data)
}
}


Users HTML (users.html)

<h1>User List</h1>

<ul>
@for (user of userData(); track user.id) {
<li>
<a [routerLink]="['/user-details', user.id]">
{{ user.name }}
</a>
</li>
}
</ul>

RouterLink is used instead of href.


User Details Component (user-details.ts)

import { Component, signal } from '@angular/core';
import { UserService } from '../../services/user-service';
import { ActivatedRoute } from '@angular/router';

@Component({
selector: 'app-user-details',
imports: [],
templateUrl: './user-details.html',
styleUrl: './user-details.css',
})
export class UserDetails {
userData:any=signal("");
constructor(public userService:UserService,public route:ActivatedRoute){}
ngOnInit(){
const data =this.userService.userList();
this.route.params.subscribe((params)=>{
const filteredData= data.filter((item)=>item.id==params['id'])
this.userData.set(filteredData[0])
})
}
}

ActivatedRoute is used to get route parameters.


User Details HTML (user-details.html)

<h2>User Details</h2>

<ul>
<li>Name: {{ userData()?.name }}</li>
<li>Email: {{ userData()?.email }}</li>
<li>City: {{ userData()?.city }}</li>
<li>ID: {{ userData()?.id }}</li>
</ul>


Important Points

Dynamic routing is done using route parameters

ID is passed through the route

Data is filtered based on ID

Service is used for common data

RouterLink must include /

Forgetting / in routes is a common mistake