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




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: