Sending & Getting Routes Parameters in Angular

In this article learn how to sending & getting Routes Parameters in Angular. To get parameters from the route using ActivatedRoute’s snapshot and paramMap method. We take the example of products and products detail page. Let’s start to implement the demo for the routing. For that first, create a new project in angular for that you need to run the following command to create a project.


ng new routing-demo

“routing-demo” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd routing-demo”. To Run angular applications, it required to run “ng serve”.
After that, we need to create an “app.routing.module.ts” file we need below code.


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ProductsComponent } from './products/products.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';


const routes: Routes = [
  { path: '', component: ProductsComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'product-detail/:id', component: ProductDetailComponent },
];

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

export class AppRoutingModule { }

After adding we need to import routing in the module file “app.module.ts”.


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ProductsComponent } from './products/products.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { AppRoutingModule } from './app.routing.module';


@NgModule({
  imports:      [ BrowserModule, FormsModule,AppRoutingModule ],
  declarations: [ AppComponent, HelloComponent,  ProductsComponent, ProductDetailComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Let’s create a “product” Component to display the product listing and click on the product we need to pass the parameter to the product detail page.


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

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

export class ProductsComponent {

  Products = [
    {
      id: "AQWS123",
      name: "Rose",
      image:"https://images.unsplash.com/photo-1548460464-2a68877c7a5f"
    },
    {
      id: "AQWS636",
      name: "Rose2",
      image:"https://images.unsplash.com/photo-1530906622963-8a60586a49c7"
    },
    {
      id: "AQWS968",
      name: "Tulips",
      image:"https://images.unsplash.com/photo-1422558068704-1f8f0609e27c"
    }
  ]

}


<div *ngFor="let products of Products">


    <a [routerLink]="['/product-detail/', products.id]">
    <img src="{{products.image}}" width="200">
    </a>
    
</div>




Product Detail page code display.


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_id: string;

  constructor(private actRoute: ActivatedRoute) { }

  ngOnInit() {
    this.actRoute.paramMap.subscribe(params => {
      this.product_id = params.get('id');
    });
  }
}


<h4>Product Id: {{product_id}}</h4>


ActivatedRoute Snapshot


 this.product_id = this.actRoute.snapshot.params.id;

Below is the full embeded code for angular routing you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  • 10
  • 2
  •  
  •