This post is a guide on how to Pass the URL Parameters or Query Parameters along with the HTTP Request using the HttpClient in Angular. We will be using HttpParams to add the URL Parameter, which is then used by the GET, POST, PUT & PATCH etc methods to send an HTTP request to the back end API. The URL Parameters also are known by the name Query strings, Query Params, Get Params, etc.
Refer to our tutorial on Angular HTTP get example & Angular HTTP Post Example
The HttpParms were known as URLSearchParams until Angular 4
Applies to: Angular 5 to the latest edition i.e. Angular 8, Angular 9. Angular 10, Angular 11
Table of Contents
The URL Parameters
In the Angular HttpClient GET Example article, we created a GitHubService. The Service issued GET Request to GitHub API Endpoint to retrieve the List of Repositories belonging to a particular User.
The GitHub API also has a set of parameters, which allows us to specify how we want to sort, which page to retrieve, No of Entries per page and type of the Repository to retrieve, etc.
For Example
1 2 3 | https://api.github.com/users/tekTutorialsHub/repos?sort=description&page=2 |
The Above query will return the result sorted on the description and retrieves only the second page. The string sort=description&page=2 after the question mark is called URL Parameter or Query strings /Query Parameters. The Question mark is used as a separator. The URL Parameters are also known as the GET params.
HttpParams()
We add the URL parameters using the helper class HttpParams. The HttpParams is passed as one of the arguments to HttpClient.get method.
To use HttpParams, you need to import it first as shown below.
1 2 3 | import { HttpClient,HttpParams } from '@angular/common/http'; |
Then create an instance of the HttpParams class.
1 2 3 4 5 | const params = new HttpParams() .set('page', PageNo) .set('sort', SortOn); |
And then call the httpClient.get method passing the params as the argument.
1 2 3 | return this.httpClient.get<repos[]>(this.baseURL + 'users/' + userName + '/repos',{params}) |
The following are the list of method available in HttpParams class
HttpParams.set
1 2 3 | set(param: string, value: string): HttpParams |
Construct a new body with a new value for the given parameter name. If the parameter already exists then it is replaced else it is added.
1 2 3 4 5 6 7 8 | params = new HttpParams() .set('page', '2') .set('page', '3') .set('sort', 'name'); console.log(params.toString()); //Returns page=3&sort=name |
HTTPParams is immutable
The HttpParams object is immutable. Every time you call a set method on Params object, it will create and return a new instance of the Params.
For Example
The following code does not work
1 2 3 4 5 6 | let params = new HttpParams(); params.set('page', PageNo); params.set('sort', SortOn); |
Each call to set method does not add the options to the existing HttpParams instance, but creates a new instance from the existing instance and returns it.
To work around, you can use the code as follows
1 2 3 4 5 | Let params = new HttpParams() .set('page', PageNo) .set('sort', SortOn); |
Or you can try this
1 2 3 4 5 6 | let params = new HttpParams(); params=params.set('page', PageNo); params=params.set('sort', SortOn); |
HttpParams.append
1 2 3 | append(param: string, value: string): HttpParams |
Construct a new body with an appended value for the given parameter name. Always appends the value irrespective of whether the parameter exists. The page parameter is appended twice in the following example.
1 2 3 4 5 6 7 8 | params = new HttpParams() .set('page', '2') .append('page', '3') .set('sort', 'name'); console.log(params.toString()); //Returns page=2&page=3&sort=name |
The URL Is constructed as page=2&page=3&sort=name
You can also use the append method similar to the Set method
1 2 3 4 5 6 | let params = new HttpParams(); params=params.append('page', PageNo); params=params.append('sort', SortOn); |
HttpParams.has
1 2 3 | has(param: string): boolean |
Returns true if the given parameter name already exists in the HttpParams
1 2 3 4 5 6 7 8 | params = new HttpParams() .set('sort', 'name'); if (!params.has('page')) { params = params.set('page', PageNo) } |
HttpParams.get
1 2 3 | get(param: string): string | null |
Get the first value for the given parameter name, or null if it’s not present.
1 2 3 4 5 6 7 8 | params = new HttpParams() .set('page', '2') .append('page', '3') .set('sort', 'name'); console.log(params.get('page')); // Returns 2 The First occurance of Page |
HttpParams.getAll
1 2 3 | getAll(param: string): string[] | null |
Get all values as for the given parameter name, or null if it’s not present.
1 2 3 4 5 6 7 8 | params = new HttpParams() .set('page', '2') .append('page', '3') .set('sort', 'name'); console.log(params.getAll('page')); // Returns ["2", "3"] All occurance of Page |
HttpParams.keys
1 2 3 | keys(): string[] |
Get all the parameter names for this body.
1 2 3 4 5 6 7 | let params = new HttpParams() .set('page', '2') .set('sort', 'name'); console.log(params.keys()); //Returns ["page", "sort"] |
HttpParams.delete
1 2 3 | delete(param: string, value?: string): HttpParams |
Deletes the parameter and returns the new parameter collection. You can delete using the parameter name or by using the name & value. If no argument is specified, then all parameters are deleted.
1 2 3 4 5 6 7 8 9 10 11 12 | params = new HttpParams() .set('page', '2') .Append('page', '3') .set('sort', 'name'); params = params.delete('page', '3'); //Deletes the parameter page with value 3 params = params.delete('page'); //Delete the all the parameter of page params = params.delete(''); //Delete all parameters |
HttpParams.toString
1 2 3 | toString(): string |
Serialize the body to an encoded string, where key-value pairs (separated by =) are separated by &s.
1 2 3 4 5 6 7 8 | params = new HttpParams() .set('page', '2') .Append('page', '3') .set('sort', 'name'); console.log(params.toString()); //Returns page=2&page=3&sort=name |
Http Parameters from a string
Another way to pass the value is to use the fromString shortcut
1 2 3 | let params = new HttpParams({fromString: 'page=' + PageNo + '&sort=' + SortOn}); |
Http Parameters from an object
1 2 3 | let params = new HttpParams({ fromObject: { page: PageNo, sort: SortOn } }); |
Without params
You can also add the parameters directly to the URL, without going through the HttpParams as shown below.
1 2 3 4 | //You an also do it this way. return this.httpClient.get<repos[]>(this.baseURL + 'users/' + userName + '/repos?'+'page='+PageNo+'&sort='+SortOn); |
Angular Httpparams Example
We are updating the project, which was created in the tutorial Angular Http GET Example.
app.module
Import the httpClientModule from the @angular/common/http package.
1 2 3 | import {HttpClientModule} from '@angular/common/http'; |
Declare it in Imports metadata array in app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, FormsModule ], providers: [GitHubService], bootstrap: [AppComponent] }) |
Passing the URL Parameters
Open the github.service.ts.
Import the HttpClient & HttpParams from the @angular/common/http. We also require the Observable module from RxJs
1 2 3 4 5 6 | import { Injectable } from '@angular/core'; import { HttpClient, HttpParams } from '@angular/common/http'; import { repos} from './repos'; import { Observable } from 'rxjs'; |
Inject HttpClient in the Constructor
1 2 3 4 | constructor(private httpClient:HttpClient){ } |
In the GetRepos method create the params object
1 2 3 4 5 | const params = new HttpParams() .set('page', PageNo) .set('sort', SortOn); |
And use the params when calling the httpClient.get method as shown below
1 2 3 | return this.httpClient.get<repos[]>(this.baseURL + 'users/' + userName + '/repos',{params}) |
The complete github.service.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | import { Injectable } from '@angular/core'; import { HttpClient, HttpParams } from '@angular/common/http'; import { Observable} from 'rxjs/Rx'; import { repos} from './repos'; @Injectable() export class GitHubService { baseURL= "https://api.github.com/"; constructor(private httpClient: HttpClient){ } getRepos(userName: string, PageNo: string, SortOn: string): Observable<repos[]> { let params = new HttpParams() .set('page', PageNo) .set('sort', SortOn); console.log(params.toString()); return this.httpClient.get<repos[]>(this.baseURL + 'users/' + userName + '/repos', {params}); } } |
App.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | import { Component } from '@angular/core'; import { Observable} from 'rxjs/Rx'; import { GitHubService } from './github.service'; import { repos} from './repos'; @Component({ selector: 'app-root', templateUrl: './app.component.html', }) export class AppComponent { userName = 'tektutorialshub'; pageNo = '1'; sortOn = 'description'; repos: repos[]; loading = false; errorMessage = ''; constructor(private githubService: GitHubService) { } public getRepos() { this.loading = true; this.errorMessage = ''; this.githubService.getRepos(this.userName,this.pageNo,this.sortOn) .subscribe((response) => {this.repos = response;}, (error) => { this.errorMessage = error.message; this.loading = false; }, () => {this.loading = false;}) } } |
App.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <div class="container"> <h1 class="heading"><strong>HTTP </strong>Demo</h1> <div class="form-group"> <label for="userName">User Name</label> <input type="text" class="form-control" name="userName" [(ngModel)]="userName"> <label for="pageNo">Page No</label> <input type="text" class="form-control" name="pageNo" [(ngModel)]="pageNo"> <label for="sortOn">Sorted On</label> <input type="text" class="form-control" name="sortOn" [(ngModel)]="sortOn"> </div> <div class="form-group"> <button type="button" (click)="getRepos()">Get Repos</button> </div> <div *ngIf="loading">loading...</div> <div *ngIf="errorMessage" class="alert alert-warning"> <strong>Warning!</strong> {{errorMessage}} </div> <div class='table-responsive'> <table class='table'> <thead> <tr> <th>ID</th> <th>Name</th> <th>HTML Url</th> <th>description</th> </tr> </thead> <tbody> <tr *ngFor="let repo of repos;"> <td>{{repo.id}}</td> <td>{{repo.name}}</td> <td>{{repo.html_url}}</td> <td>{{repo.description}}</td> </tr> </tbody> </table> </div> <pre>{{repos | json}}</pre> </div> |
Summary
We learned how to pass Get Parameters or request parameters when we invoke the HTTP get Request using httpClient.get method
When I refresh thae page, instead of
:http://localhost:4100/Constraints/home?skip=20
I get:
http://localhost:4100/Constraints/home%3Fskip%3D20
and page not found.
Why and what can I do?
Thanks
Thanks dude !!
Thanks for breaking it down into small pieces. Very useful
You used parameter are string, that works. But have tried
Number type ? id, or id.toString(), neither worked.
getQuote(id: number): Observable {
let httpParams = new HttpParams();
httpParams = httpParams.set(‘request_no’, id);
return this.http.get(this.baseUrl+’/getquote’,
{params: httpParams})
}
If parameter is Number, Tomcat server side (Springboot application server) : HttpServletRequest request
request.getParameter(“request_no”) will return [Object Object]. What is this type and how can parse it into passed number ?
Thanks
This should work
httpParams = httpParams.set(‘request_no’, id.toString());
Open the network tab in chrome and check the URL generated. You should see it as follows
baseURL/getquote?request_no=id
When I refresh thae page, instead of :http://localhost:4100/Constraints/home?skip=20
I get:
http://localhost:4100/Constraints/home%3Fskip%3D20
and page not found.
Why and what can I do?
Thanks
OK. I made mistakes for other reason.
It worked.
Thanks
Thanks for the content. FromString helped me on my way, it seems to be missing from the angular docs
Hi, have a questio, Im using (Angular7)
searchProducto(term: string): Observable {
if (!term.trim()) {return of([]);}
let headers = new HttpHeaders().set(‘Content-Type’, ‘application/json’);
let params = new HttpParams().set(‘Gpclave’, term );
return this.http.get(
${ubi}/,{params, headers}).pipe( retry(2),
tap(listaDemosp => console.log(listaDemosp) ) )
}
If term=Peter get all the info, now if term=Pe, get nothing
Any help ??
hi, the problem is most probably in your db query.. you need like for sql-type db or regex for mongo
Thank you very much, this article has helped a lot. So, I also decided to share the result of my research.
https://stackoverflow.com/questions/51350430/angular-6-dynamic-search-with-httpparams-pagination
Perfect. Simple and clear