Retrieve Parameters and Query String values from URL in Angular 6, 7, 8, and 9

In Angular, we can get the value of query parameters using ActivatedRoute object, and queryParamMap.

Two different ways:-

1.     Using route.paramMap.subscribe

2.     Using route.snapshot.paramMap

What Are the difference between route.paramMap.subscribe and  route.snapshot.paramMap?
The main difference between the two is that the subscription will continue to update as the parameter changes for that specific route. 


Using subscribe is best way to get the value from URL because if value changes within same route then value get updated in the variable. When we use snapshot then value does not update if value of code updates in same route.

Dummy URL:-http://localhost:8100/user?code=9f8c116dc868fa4377fe8c8065f21ec7e0969571

Accessing Query String Values From URL:-

Example 1,

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

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

@Component({

  selector: 'app-user',

  templateUrl: './user.component.html',

  styleUrls: ['./user.component.css']

})

export class UsersComponent implements OnInit {

  constructor(private router: ActivatedRoute) { }

  ngOnInit() {

    this.router.queryParams.subscribe(params => {

      console.log(params);

    });

  }

}

The Output looks like:-

{code :"9f8c116dc868fa4377fe8c8065f21ec7e0969571"}


Accessing the URL Parameters -

Example 2,

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

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

@Component({

  selector: 'app-user',

  templateUrl: './user.component.html',

  styleUrls: ['./user.component.css']

})

export class UsersComponent implements OnInit {

  securityCode:any;

  constructor(private router: ActivatedRoute) { }

  ngOnInit() {

    this.securityCode = this.router.snapshot.queryParamMap.get('code');

    console.log(this.securityCode);

  }

}

The Output looks like:-

{code :"9f8c116dc868fa4377fe8c8065f21ec7e0969571"}


Example 3:-

Dummy URL - http://localhost:8100/products?order=ngbook

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

import 'rxjs/add/operator/filter';

@Component({ ... })

export class ProductComponent implements OnInit {

  order: string;

  filter:string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {

    this.route.queryParams

      .filter(params => params.order)

      .subscribe(params => {

        console.log(params); //{order: "ngbook"} 

        this.order = params.order;        

        console.log(this.order); // ngbook

        //this.filter = params.filter;

        //console.log(this.filter); //version9

      });

  }

}

Note - There’s also queryParamMap, which returns an observable with a paramMap object.

It’s very similar for URL - http://localhost:8100/products?order=ngbook&filter=version9