How to create a url string with query parameters from an object in Angular 5+?

Question

I am trying to create a URL from an object in an Angular 5 SPA. My code looks like the following:

import { UrlTree, UrlSegmentGroup, DefaultUrlSerializer, UrlSegment } from "@angular/router";

const urlTree = new UrlTree();
urlTree.root = new UrlSegmentGroup([new UrlSegment("EndPoint", {})], {});
urlTree.queryParams = {
  "param1": param1Value,
  "param2": param2Value
};
const urlSerializer = new DefaultUrlSerializer();
const url = urlSerializer.serialize(urlTree);

It does the job, but it seems to include significant overhead for such a trivial job and I am wondering if there is a more straightforward method to obtain the url from the object.

My expectation is to have something simple as:

const url = someSerializer.serialize("/segment1/segment2", { 
  "param1": param1Value,
  "param2": param2Value
})

Question: How to create a url string with query parameters from an object in Angular 5+?

martin · Accepted Answer · 2018-06-25 14:08:05Z

52

You can use just Router and UrlSerializer:

constructor(private router: Router, private serializer: UrlSerializer) {
  const tree = router.createUrlTree([], { queryParams: { foo: 'a', bar: 42 } });
  console.log(serializer.serialize(tree)); // "/?foo=a&bar=42"
}

See demo: https://stackblitz.com/edit/angular-basic-template-3hx9at?file=src/app/hello.component.ts

edited Jun 25, 2018 at 14:08

answered Jun 25, 2018 at 13:58

martin

97.4k26 gold badges205 silver badges237 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Koushik Ravulapelli Over a year ago

this would work but is it not the good practice to use the constructor only for dependency injection and use ngOnInit for all the other work?

Alexei - check Codidact Over a year ago

It works, but I have to strip the segments that are automatically put based on current component route.

Stefan Falk Over a year ago

Is there an inverse operation too?

Maxence Over a year ago

In Angular 8, it outputs now matrix notation: ;foo=a;bar=42

Andre Over a year ago

you don't need the router or the serializer (which by the way is also in the router, so you don't need to inject the serializer separatly)

|

Shadoweb · Accepted Answer · 2022-09-29 09:47:20Z

35

You can directly use it in queryParams if you ultimately want to navigate through Angular's routing module.

let params = {
    param1: param1Value,
    param2: param2Value
};
    
this.router.navigate('/segment1/segment2', { queryParams: params });

For static URLs:

const params = new HttpParams()
   .set('param1', param1Value)
   .set('param2', param2Value);

const URL = 'yourEndPoint/segment1/segment2?' + params.toString();

For more details and examples see: https://www.tektutorialshub.com/angular/angular-pass-url-parameters-query-strings/

edited Sep 29, 2022 at 9:47

Shadoweb

6,3661 gold badge46 silver badges61 bronze badges

answered Jun 25, 2018 at 13:53

Prachi

3,60421 silver badges38 bronze badges

2 Comments

Alexei - check Codidact Over a year ago

For navigation it is fine, but I want to construct a URL to fetch some data from an API.

Mauricio Gracia Gutierrez Over a year ago

the second method in this answers allow you to create a URL string that you can use anywhere, including API calls

Andre · Accepted Answer · 2019-10-30 09:58:17Z

20

If you already have queryParams: Params, either from building the object yourself or getting it from the current route, you can simply use:

const queryParamsString = new HttpParams({ fromObject: queryParams }).toString();

queryParamsString will be param1=somevalue1&param2=somevalue2&...

Don't forget to prepend the ? to it if you're appending this to some URL.

answered Oct 30, 2019 at 9:58

Andre

6535 silver badges10 bronze badges

1 Comment

DWilches Over a year ago

As long as we don't need to merge the query params (like with queryParamsHandling) this answer works well.

bonniss · Accepted Answer · 2021-04-18 01:55:30Z

In case you want to build an utility to construct a query string from an object, try Angular HttpParams:

// initialize from an object
const obj: any = {
  'number': 123,
  'string': 'lincoln',
  'empty': null,
  'bool': true,
  'array': ['1991', null, 'ramanujan'],
}
let httpParams = new HttpParams({ fromObject: obj })

// append manually
// do not forget to reassign
httpParams = httpParams.append('extra', 'gimme a chance')

console.log(httpParams.toString())

// number=123&string=lincoln&empty=null&bool=true&array=1991&array=null&array=ramanujan&extra=gimme%20a%20chance

Note that HttpParams only accepts key in string and value in string | string[]. Therefore, marking obj as any makes obj valid in code editor. Another note is that HttpParams splits every item in an array into separate parameters with the same name, which might not what you expected.

If you prefer something more "native", URLSearchParams is a candidate. This one supports pretty much the same methods in HttpParams like append, delete, has etc. Syntaxes are slightly less verbose. Every value in object will force toString, so an array results in one parameter only, as opposed to the behavior in HttpParams.

const obj: any = {
  number: 123,
  arr: [999, 'michael'],
  str: 'simp',
  empty1: null,
  empty2: undefined,
  canSleep: false,
}

const searchParams = new URLSearchParams(obj)

// no need to reassign after appending
searchParams.append('more', 'gimme one more kiss')

console.log(searchParams.toString())
// number=123&arr=999%2Cmichael&str=simp&empty1=null&empty2=undefined&canSleep=false&more=gimme+one+more+kiss

URLSearchParams is supported in most modern browsers, Node.js and Web Workers. To use it in IE, please provide a polyfill.

Thomas Turrell-Croft · Accepted Answer · 2021-05-29 13:09:49Z

8

You can take the same approach as the Angular HttpClient

const url = 'https://example.com'

const params = new HttpParams()
  .set('key1', 'Value 1')
  .set('key2', 'Value 2')

const request = new HttpRequest('GET', url, null, {params});

request.urlWithParams

The advantage of this approach is that the HttpParams class handles URL encoding of the parameters and the HttpRequest handles cases when the URL has existing params or simply has a '?' at the end.

edited May 29, 2021 at 13:09

answered May 29, 2021 at 12:45

Thomas Turrell-Croft

7608 silver badges8 bronze badges

Comments

Gobu CSG · Accepted Answer · 2018-06-25 14:23:56Z

5

Try like this:

  let httpParams = new HttpParams().set('params1', String(id));
  httpParams = httpParams.set('params2', String(name));

  return this.httpClient.get<any>(this.BASE_URL, {
          params: httpParams
        });

answered Jun 25, 2018 at 14:23

Gobu CSG

6915 silver badges8 bronze badges

Comments

yer · Accepted Answer · 2018-06-25 13:57:11Z

-4

You can construct a url while making a call to api to fetch data like this:

GetData(id) {

    this.http.get<User>('http://test.com' + id + '/users')
      .subscribe(data => {
        console.log(data)
      });
}

answered Jun 25, 2018 at 13:57

yer

1,5322 gold badges19 silver badges33 bronze badges

1 Comment

Sixteen Over a year ago

I tried this way but if you have special chars inside your query, like quotes, this doesn't work even with escaped quotes.

Collectives™ on Stack Overflow

How to create a url string with query parameters from an object in Angular 5+?

7 Answers 7

7 Comments

2 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

2 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related