by Sai gowtham

Getting the URL parameters in Angular

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

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);  }
}

Note: The snapshot stores the URL params data at the time of component is initialized.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
130,921 students enrolled
48.5 hours of video content
View Course