Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

HTTP - Configure URL parameters

Use the HttpParams class with the params request option to add URL query strings in your HttpRequest.

Create URL parameter using the search method

The following example, the searchHeroes() method queries for heroes whose names contain the search term.

Start by importing HttpParams class.

      
      import {HttpParams} from "@angular/common/http";
    
      
      /* GET heroes whose name contains search term */
searchHeroes(term: string): Observable<Hero[]> {
  term = term.trim();

  // Add safe, URL encoded search parameter if there is a search term
  const options = term ?
   { params: new HttpParams().set('name', term) } : {};

  return this.http.get<Hero[]>(this.heroesUrl, options)
    .pipe(
      catchError(this.handleError<Hero[]>('searchHeroes', []))
    );
}
    

If there is a search term, the code constructs an options object with an HTML URL-encoded search parameter. If the term is "cat", for example, the GET request URL would be api/heroes?name=cat.

The HttpParams object is immutable. If you need to update the options, save the returned value of the .set() method.

Create URL parameters from a query

You can also create HTTP parameters directly from a query string by using the fromString variable:

      
      const params = new HttpParams({fromString: 'name=foo'});
    

Last reviewed on Tue Nov 08 2022