URL Parameters in Angular Routing: A Simple Guide

Angular Routing is a powerful feature that enables you to build Single Page Applications (SPAs) by dynamically displaying content as users navigate through different views. One of the key features of Angular Routing is the ability to use URL parameters to pass data from one component to another. In this article, we will explore how to use URL parameters in Angular Routing to create more dynamic and interactive user experiences.

What are URL Parameters?

A URL parameter is a value that is passed to a web page or application in the URL. For example, if you visit a website that has a search feature and you type in "angular developer" as the search term, the URL may look something like this:

https://www.example.com/search?q=angular+developer

In this URL, "q" is the parameter name and "angular+developer" is the parameter value. URL parameters are a powerful tool for passing data between different parts of a web application, and can be used to dynamically update the content of a page.

Implementing URL Parameters in Angular Routing

Let's say we have a simple Angular application that displays a list of products. When a user clicks on a product, we want to display the details of that product in a separate view. We can use Angular Routing to achieve this functionality, and we can also use URL parameters to pass the ID of the product to the detail view.

First, we need to define our routes in the app-routing.module.ts file. We will create two routes: one for the product list and one for the product detail view.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/products', pathMatch: 'full' },
  { path: 'products', component: ProductListComponent },
  { path: 'products/:id', component: ProductDetailComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In this code, we have defined two routes:

• The '/' path redirects to '/products'.
• The '/products' path maps to the ProductListComponent.
• The '/products/:id' path maps to the ProductDetailComponent, with ':id' as the parameter.

Next, we need to create our two components: the ProductListComponent and the ProductDetailComponent.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {

  products = [
    { id: 1, name: 'Product 1', description: 'This is Product 1.' },
    { id: 2, name: 'Product 2', description: 'This is Product 2.' },
    { id: 3, name: 'Product 3', description: 'This is Product 3.' }
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

Our ProductListComponent is simple: it displays a list of products. For this example, we have hardcoded three products, each with an ID, name, and description.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {

  product;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    let id = this.route.snapshot.paramMap.get('id');
    this.product = this.products.find(p => p.id == id);
  }

}

The ProductDetailComponent is where we use our URL parameter. We import the ActivatedRoute service, which gives us access to the parameters of the current route. In the ngOnInit method, we use the snapshot of the paramMap to get the value of the 'id' parameter, and then use it to find the corresponding product from our product list.

Finally, we need to create the templates for our two components. The ProductListComponent template is straightforward: it displays each product in a simple list.

<ul>
  <li *ngFor="let product of products">
    <a [routerLink]="['/products', product.id]">{{ product.name }}</a> - {{ product.description }}
  </li>
</ul>

In this template, we use the *ngFor directive to loop through the products array and display each product. We also use the routerLink directive to create a link to the ProductDetailComponent, passing the ID of the product as a parameter.

The ProductDetailComponent template uses the product that we retrieved from the URL parameter to display more detailed information about the product.

<h2>{{ product.name }}</h2>
<p>{{ product.description }}</p>

Conclusion

Using URL parameters in Angular Routing is a powerful tool for building dynamic, interactive web applications. By passing data between components through the URL, we can create more personalized and engaging user experiences. With the simple guide outlined in this article, you can start using URL parameters in your Angular applications today.