How to get query string params in angular 12 ?

In this tutorial i will show you to get the query string params in angular using ActivatedRoute. Angular completely works in different way from other javascript frameworks, Angular uses its own routing framework to land between the pages. Let’s quickly deep dive in to the topic and learn it.

So before start we should have knowledge of angular routing modules, i am assuming that you know about angular routing.

Suppose we have this URL

https://domain.com/post?id=1

then Simplest way to get the query param

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

@Component({
  selector: 'app-helloworld',
  templateUrl: './helloworld.component.html',
  styleUrls: ['./helloworld.component.css']
})
export class HelloworldComponent {
  constructor(public activatedRoute: ActivatedRoute) {
    //this will only give first time and will not subscribe if there is change in url
    let id=this.activatedRoute.snapshot.queryParamMap.get("id"));
    //or 
   //it will subscribe the url changes and will update the component accordingly
    this.activatedRoute.queryParamMap.subscribe(data=>{
       alert(data.get("id"));
    });
   }
}

As you can see we have used here ActivatedRoute from '@angular/router' and then injected in constructor.

here we used two methods one is using snapshot and other is using subscribe, snapshot not listen for changes in url but subscribe do listen for changes and we can get query parameter using get method.

I will show you the difference between snapshot vs subscribe in activated route. let’s begin the tutorial of get query string params in angular step by step

Step 1 : Create an angular app

First step is to setup an angular app using below command

ng new example-app

Now, this will ask for

Would you like to add Angular routing?, select Y

Step 2: Create a Component

Create a component so we can add conditional statements

ng g c hello-world

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

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css'],
})
export class HelloWorldComponent implements OnInit {
  id: any;
  subscribed_id: any;
  constructor(public activatedRoute: ActivatedRoute) {
    this.id = this.activatedRoute.snapshot.queryParamMap.get('id');

    this.activatedRoute.queryParamMap.subscribe((data) => {
      this.subscribed_id = data.get('id');
    });
  }

  ngOnInit() {}
}

as we described above subscribe and snapshot, if you check stackblitz example below then you will find the difference easily since one is subscribing the changes and other not on changing the url.

Step 3 : Create template and add html

Now, add simple html template with a link and show id

<h1>POST PAGE</h1>
<a routerLink="/post" [queryParams]="{ id: '4' }">Go To Post 4</a> <br />
Current URL ID IS. {{ id }}
<br>
Current SUBSCRIBED ID IS. {{ subscribed_id }}

Live Example and code:

Here if you click on go to post 1 and then again go to post 4 then you will be able to understand that subscribe method is changing continuously.