How to get Query String from url in Angular?

How to get Query String from url in Angular?


tutorials - 5 undefined, 2020

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

Our Sponsors

NodeJS Experts
React Experts
PHP Experts
AngularJS Experts
Aws Experts
Firebase Experts

Top Applications in TutorialStuff

Top Experts In TutorialStuff

Trending On TutorialStuff