Here, i will let you know how to get query string value in angular 8. i will show you example of getting query string parameters from url in angular app. you can easily get query string from string in angular 8.
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.
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...
Do you like below Tutorials ?
- Laravel 7.x and 6.x Ajax Multiple Image Upload with Preview Example
- Laravel select with count(*) using db raw example
- PHP Laravel select with join subquery example
- PHP Laravel Ajax Form Submit Example
- How to create events for created/updated/deleted model task in Laravel 5?
- Angular JS Form Validation Example Code
- AngularJS - Confirm Password Validation Example
- Laravel Ajax Request using X-editable bootstrap Plugin Example