Angular Routing Parameters

In the previous articles, you’ve learned about the basics of routing and navigation with a block diagram, and you’ve also learned about wild card routing in Angular. In this article, you’ll see how to pass parameters at the time of routing.

How to Pass Values as Parameters in Angular Route?

Angular routing provides parameter passing to use GET parameters from the URL. To define a route with a GET parameter we have to define it in path with a colon(:) prefix [Ex {path:’my-route/:my_parameter’}].

Let’s understand it with a pictorial representation:

Angular routing with parameter passing illustration

Suppose we have a product component that contains the name and id of every product. We want to navigate to the product-details component on clicking on the products and also want to pass the id of the product as a parameter; we can do that as well in Angular.

Let’s follow the steps and see how to implement this:

Step 1: Generate two components and name them as products and product-details

NOTE: Please refer to Components In Angular to learn how to generate components.

Step 2: Configure the routes

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { ComponentNameComponent } from './component-name/component-name.component';
import { ProductsComponent } from './products/products.component';
import { ProductsDetailsComponent } from './products-details/products-details.component';

const routes: Routes = [
  {path:'',redirectTo:'/products', pathMatch:'full'},
  {path:'products', component:ProductsComponent},
  {path:'products/:id', component:ProductsDetailsComponent},
  {path:'component-name', component:ComponentNameComponent},
  {path:'**',component:PageNotFoundComponent}
]

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

export class AppRoutingModule { }

export const routingComponents = [
  ComponentNameComponent,
  PageNotFoundComponent,
  ProductsComponent,
  ProductsDetailsComponent
]
  • In the const route, add a new object with a path and component in it.
  • Set path to products/:id.
  • Set component to product-details and also import it.
  • Add both the components to the routingComponents

Step 3: Import Router from @angular/router

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

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})

export class ProductsComponent implements OnInit {
  products=[
    {id:100, name:"Samsung"},
    {id:101, name:"Apple"},
    {id:102, name:"Lenovo"},
    {id:103, name:"Oppo"},
    {id:104, name: "Vivo"}
  ]

  constructor(private router:Router) { }

  ngOnInit(): void { }

  onClicked(product:any) {
    this.router.navigate(['/products',product.id])
  }
}
  • Create an array of objects which will contain product details and display them into the view.
  • Create an instance of Router in the constructor.
  • Use the instance to navigate and also pass the id as a parameter through it.

Step 4: Import ActivatedRoute from @angular/router

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

@Component({
  selector: 'app-products-details',
  templateUrl: './products-details.component.html',
  styleUrls: ['./products-details.component.css']
})

export class ProductsDetailsComponent implements OnInit {
  product_id=""
  constructor(private route: ActivatedRoute) { }
  ngOnInit(): void {
    let id= JSON.stringify(this.route.snapshot.paramMap.get('id'));
    this.product_id=id
  }
}
  • Create an instance of ActivatedRoute in the constructor.
  • Use this to take a snapshot and get the id.

Step 5: Create a property to store the value and display it using interpolation

<h1>You Selected Product Id = {{product_id}}</h1>

Let’s see the output in the browser:

angular route parameter passing example 1

Select Apple with id=101 and see the result:

angular route parameter passing example 2

Conclusion

In this article, you’ve learned one more important and mostly used topic related to Routing and Navigation in Angular. It is important because you’re navigating and, at the same time, passing some needed parameters with it.

Read Next: Angular Forms

Leave a Reply

Your email address will not be published. Required fields are marked *