Dec 4, 2022 Author - Sai gowtham

Getting the URL parameters in Angular

angular1min read

In this tutorial, we are going to learn about how to get the URL parameters from a current route in Angular.

reactgo.com recommended courseAngular - The Complete Guide (2023 Edition)

Getting the URL parameters

Consider, we have the following route in our angular routes array.

const routes: Routes = [
  { path: "product/:id", component: ProductComponent },
];

To access the id (url) parameter value from a ProductComponent, we can use the ActivatedRoute interface this.route.params observable.

product.component.ts

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
@Component({
  selector: "app-product",
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  constructor(private route: ActivatedRoute) {  }

  ngOnInit(){
    this.route.params.subscribe(params=>{
        let id = params['id'];    })
  }
}

Similarly, we can also use this.route.snapshot.params object.

product.component.ts

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
@Component({
  selector: "app-product",
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  constructor(private route: ActivatedRoute) {  }

  ngOnInit(){
     let id = this.route.snapshot.params['id'];
     console.log(id);  }
}