Accessing Route Parameters in Angular 2: A Comprehensive Guide
When building dynamic web applications with Angular, accessing parameters passed through the URL is a common requirement. This allows you to tailor your application's behavior based on user input or specific data. In this article, we will explore the "Angular way" of accessing route parameters, providing a clear and practical solution to the common problem of extracting data from the URL.
Understanding Route Parameters
Route parameters are placeholders within a route's path that represent dynamic values. In your example:
{ path: 'companies/:bank', component: BanksComponent }
:bank is the route parameter. When you navigate to http://localhost:8099/#/companies/bdo, the value bdo is assigned to the :bank parameter.
The Angular Solution: ActivatedRoute
Angular provides the ActivatedRoute service to access information about the current route, including its parameters.
1. Inject the ActivatedRoute
In your component's constructor, inject the ActivatedRoute service:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-banks',
templateUrl: './banks.component.html',
styleUrls: ['./banks.component.css']
})
export class BanksComponent implements OnInit {
bankName: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.paramMap.subscribe(params => {
this.bankName = params.get('bank');
});
}
}
2. Subscribe to paramMap
The ActivatedRoute service's paramMap property is an observable that emits a map of route parameters. We use the subscribe() method to listen to changes in these parameters.
3. Access the Parameter
Inside the subscribe() callback, we use the get() method of the params object to retrieve the value of the bank parameter.
Example: Displaying the Bank Name
Now, you can use the bankName variable within your component's template to display the bank name retrieved from the route parameter:
<h1>Welcome to {{ bankName }}!</h1>
This will display "Welcome to bdo!" when navigating to http://localhost:8099/#/companies/bdo.
Why Avoid window.location.href?
While you can use window.location.href to access the URL, it's generally considered an anti-pattern in Angular applications. This approach bypasses Angular's routing system and can make your application harder to maintain and less robust.
Using ActivatedRoute ensures that your component is aware of route changes and receives updates in a clean and predictable way.
Additional Tips
-
Multiple Parameters: If your route has multiple parameters, you can access them similarly using their corresponding keys in the
paramsobject. -
Parameter Types: Parameters can be of various types (strings, numbers, etc.). You might need to convert them to the desired type using
parseInt()or other methods. -
Route Data:
ActivatedRoutecan also be used to access route data, which provides additional information associated with a particular route.
Conclusion
By utilizing the ActivatedRoute service, you can seamlessly access route parameters within your Angular components, making your application dynamic and responsive. This approach aligns with Angular's principles of declarative routing and separation of concerns, ensuring a clean and maintainable codebase.
