How to Get Query Parameters from URL route in Angular

Getting current URL and parameters is basic requirement in web development. This provides to select the option, set CSS to selected element or getting url segments like id etc.

In this article, I will show you how you can get current URL with parameters in Angular component and use it show different CSS than other. Check the below examples, how you can get current url:

Current URL path with query parameters

This method will return current url path with query string parameters. First import Router module from @angular/router in your component.

import { Router } from '@angular/router';

Then, create a instance in the constructor() method.

constructor(private router: Router) { }

And finally you can get the current url path with router.url property.

Here is the final component:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  constructor(private router: Router) { }
  ngOnInit(): void {
    const currentUrlPath = this.router.url;
    console.log(currentUrlPath); // /dashboard
  }
}

Get query string parameters

If you only want to get query string parameters appended with url, import ActivatedRoute module from @angular/router.

import { ActivatedRoute } from '@angular/router';

Create new instance into constructor method.

constructor(private route: ActivatedRoute) { }

And use subscribe() method to route.queryParams as below:

this.route.queryParams.subscribe(params => {
  this.data = params['data']; // data=old
  this.view = params['view']; // view=detail
});

Here is the final component class:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {
  data: string = '';
  view: string = '';
  constructor(private route: ActivatedRoute) { }
  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
        this.data = params['data']; // data=old
        this.view = params['view']; // view=detail
    });
  }
}

Get path variables

If your url has path variables, for example, /product/edit/:id then it can be accessed using this.route.snapshot.paramMap.

import ActivatedRoute module from @angular/router.

import { ActivatedRoute } from '@angular/router';

Create new instance into constructor method.

constructor(private route: ActivatedRoute) { }

And you can get parameter like:

const id = Number(this.route.snapshot.paramMap.get('id'));

Note that returned parameter is always string, so you need to use Number method to convert data type into number.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {
  constructor(private route: ActivatedRoute) { }
  ngOnInit(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    console.log(id);
  }
}

Conclusion

So these ways you can get current url or variable from url into Angular. I hope you liked this article and it will help you on your development.