Dynamic Routes

Dynamic Routes in Angular

In Angular, dynamic routes are used to load a specific data or entity within a component based on the route parameters.

For example, in a streaming platform having multiple videos, the application could use dynamic routes to load each video within the VideosComponent by passing the video ID as a route parameter.

This way, each time a user navigates to a new video (e.g., /videos/:id), the corresponding video data is fetched and displayed dynamically.

Note: Dynamic routing refers to the overall technique or approach of implementing dynamic routes.

Syntax of Angular Dynamic Routes

Below is the syntax to create Dynamic Routes in Angular −

const routes: Routes =[{ path:'route-path/:parameterName', component: SomeComponent }];

Here,

• route-path: This represents the name of the route path that will be used to access the current component.
• parameterName: The name of the parameter that you want to access, such as id.
• SomeComponent: The name of the component that should be loaded based on the current path and parameter.

The ‘parameterName’ can be accessed in the component using two techniques, which are:

• Using Observable.
• Using snapshot (non-observable option).

Using Observable

Angular provides a special interface named paramMap to access the parameters of the path (URL). parmaMap has the following methods −

• has(name): Returns true if the specified name is available in the path (parameter list).
• get(name): Returns the value of the specified name in the path (parameter list).
• getAll(name): Returns the multiple value of the specified name in the path. The get() method returns only the first value when multiple values are available.
• keys: Returns all parameters available in the path.

The Steps to access the parameter using paramMap are as follows −

• Import paramMap available in @angular/router package.
• Use paramMap in the ngOnInit() to access the parameter and set it to a local variable.

ngOnInit(){this.route.paramMap.subscribe(params =>{this.parameterName = params.get('parameterName);});}

We can use it directly in the rest service using the pipe method.

this.item$ =this.route.paramMap.pipe(switchMap(params =>{this.selectedId =Number(params.get('parameterName'));returnthis.service.getItem(this.selectedId);}));

Using snapshot

The snapshot is similar to Observable, but it does not support observable and gets the parameter value immediately.

let id =this.route.snapshot.paramMap.get('parameterName');

Example of Angular Dynamic Routes

Below is a example of using the Dynamic Routes in a Angular project −

Step 1: Define dynmiac route

import{ Routes }from'@angular/router';import{ HomeComponent }from'./home/home.component';import{ AboutComponent }from'./about/about.component';import{ ViewItemComponent }from'./view-item/view-item.component';exportconst routes: Routes =[{path:'home', component: HomeComponent},{path:'about', component: AboutComponent},{path:'view/:id', component: ViewItemComponent}];

Step 2: Add your routes to your application

<h1>Angular Routing</h1><a routerLink="/home">Home</a><br><a routerLink="/about">About</a><a routerLink="/view/1">View Item1</a><br><a routerLink="/view/2">View Item2</a><router-outlet></router-outlet>

Step 3: Access ‘id’ parameter in ViewItemComponent

import{ Component, OnInit }from'@angular/core';import{ ActivatedRoute }from'@angular/router';@Component({
  selector:'app-view-item',
  imports:[],
  templateUrl:'./view-item.component.html',
  styleUrl:'./view-item.component.css'})exportclassViewItemComponentimplementsOnInit{
  id:any;constructor(private route: ActivatedRoute){}ngOnInit():void{this.route.paramMap.subscribe(res=>{this.id = res.get('id');});}}

Step 4: Display the current Item based on it’s id

<p>View item{{id}}</p>

Now run the application and see the output:

By observing the URL in the above GIF, you can clearly see that the items are loaded dynamically based on changes to their ID parameter in the routes.