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

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/

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

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.

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.