How to pass route parameters in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Passing route parameters enables dynamic content loading and component communication through URL-based data transfer in Angular applications. As the creator of CoreUI with 25 years of development experience, I’ve implemented parameterized routing in countless enterprise applications. The most efficient approach uses parameterized route paths with ActivatedRoute service for accessing parameter values. This method provides clean URLs while enabling components to receive dynamic data for content rendering.
Define parameterized routes with :parameter syntax and access values using ActivatedRoute service.
// app-routing.module.ts
const routes: Routes = [
{ path: 'user/:id', component: UserComponent },
{ path: 'product/:id/:category', component: ProductComponent }
]
// user.component.ts
import { Component, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
@Component({
selector: 'app-user',
template: `
<div>
<h2>User Profile</h2>
<p>User ID: {{ userId }}</p>
</div>
`
})
export class UserComponent implements OnInit {
userId: string | null = null
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.userId = this.route.snapshot.paramMap.get('id')
// For reactive parameter changes
this.route.paramMap.subscribe(params => {
this.userId = params.get('id')
})
}
}
// Navigation
<a [routerLink]="['/user', 123]">View User 123</a>
This implementation defines routes with parameter placeholders using colon syntax (:id). The ActivatedRoute service provides access to route parameters through paramMap. Use snapshot.paramMap for one-time access or subscribe to paramMap for reactive updates when parameters change without component destruction.
Best Practice Note:
This is the same parameter handling pattern we use in CoreUI Angular applications for dynamic content loading.
Always unsubscribe from parameter subscriptions in ngOnDestroy to prevent memory leaks, or use the async pipe in templates for automatic subscription management.
