**Course Title:** Mastering Angular: Building Scalable Web Applications **Section Title:** Routing and Navigation **Topic:** Handling route parameters and query parameters. **Overview** In the previous topics, we learned how to configure routes and use router outlets to navigate between different parts of our Angular application. However, in many real-world scenarios, we need to pass data between routes. This can be achieved by using route parameters and query parameters. In this topic, we will learn how to handle route parameters and query parameters in Angular. **Route Parameters** Route parameters are used to pass data between routes in Angular. We can define route parameters in the route configuration using the `:` symbol followed by the parameter name. For example: ```typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { UserComponent } from './user/user.component'; const routes: Routes = [ { path: 'user/:id', component: UserComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ``` In this example, we defined a route parameter `id` in the `user` route. **Accessing Route Parameters** To access route parameters, we need to inject the `ActivatedRoute` object into our component. We can then use the `snapshot` property to access the route parameters. ```typescript import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-user', template: '<p>User ID: {{ id }}</p>' }) export class UserComponent implements OnInit { id: string; constructor(private route: ActivatedRoute) { } ngOnInit(): void { this.id = this.route.snapshot.paramMap.get('id'); } } ``` In this example, we accessed the `id` route parameter and displayed it on the component template. **Query Parameters** Query parameters are used to pass additional data between routes in Angular. We can define query parameters using the `?` symbol followed by the parameter name and value. For example: ```typescript import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-example', template: '<button (click)="navigate()">Navigate</button>' }) export class ExampleComponent { constructor(private router: Router) { } navigate(): void { this.router.navigate(['/user'], { queryParams: { name: 'John' } }); } } ``` In this example, we defined a query parameter `name` with value `John` when navigating to the `user` route. **Accessing Query Parameters** To access query parameters, we need to inject the `ActivatedRoute` object into our component. We can then use the `queryParamMap` property to access the query parameters. ```typescript import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-user', template: '<p>Query Parameter: {{ name }}</p>' }) export class UserComponent implements OnInit { name: string; constructor(private route: ActivatedRoute) { } ngOnInit(): void { this.route.queryParamMap.subscribe(params => { this.name = params.get('name'); }); } } ``` In this example, we accessed the `name` query parameter and displayed it on the component template. **Key Takeaways** * Route parameters are used to pass data between routes in Angular. * We can define route parameters using the `:` symbol followed by the parameter name. * We can access route parameters using the `ActivatedRoute` object and the `snapshot` property. * Query parameters are used to pass additional data between routes in Angular. * We can define query parameters using the `?` symbol followed by the parameter name and value. * We can access query parameters using the `ActivatedRoute` object and the `queryParamMap` property. **Practice Exercise** Try to create a simple Angular application with two routes: `user` and `product`. Define a route parameter `id` for the `user` route and a query parameter `name` for the `product` route. Use the `ActivatedRoute` object to access the route parameters and query parameters in the respective components. **Additional Resources** * [Angular Documentation: Routing](https://angular.io/guide/router) * [Angular Documentation: ActivatedRoute](https://angular.io/api/router/ActivatedRoute) * [Angular Documentation: QueryParams](https://angular.io/api/router/QueryParams) **Leave a Comment/Ask for Help** If you have any questions or need help with this topic, please leave a comment below.