How to get Query String from url in Angular?

By Hardik Savani | December 16, 2019 | Category : 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, angular 9, angular 10 and angular 11.

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...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: