How to get Query String from url in Angular?

Are you looking for angular get query string parameter from url? if yes then i will help you to how to get query string params from current url in angular 8 component application. we will get query string from url using ActivatedRoute in angular app. You can get easily in angular 6, angular 7, angular 8 and angular 9.

Many times we need to get query string parameters in angular app. You can easily get query string using ActivatedRoute. i will show you more examples for how to get query string value in angular 8 application.

Let’s see bellow example, that will help you:

Get All Query String Parameters:

You can get query string in your component like as bellow:

component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {
  constructor(private router: ActivatedRoute) { }
  ngOnInit() {
    this.router.queryParams.subscribe(params => {
      console.log(params);
    });
  }
}

URL:

http://localhost:4200/posts?id=12&name=Hardik

Output:

{id: "12", name: "Hardik"}

Get One Query String Param Value:

You can get query string in your component like as bellow:

component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {
  constructor(private router: ActivatedRoute) { }
  ngOnInit() {
    console.log(this.router.snapshot.queryParamMap.get('id'));
  }
}

URL:

http://localhost:4200/posts?id=12&name=Hardik

Output:

12

Now you can use in your app.

I hope it can help you…