Angular2+ http params to router query params

Question

I want to pass an instance of HttpParams class into the routing query parama

const params: HttpParams = new HttpParams().set('page', '2')
this.router.navigate([''],{queryParams: params.toString()});

and i got an error:

Type 'string' is not assignable to type 'Params | null | undefined'

if I pass params directly without converting to a string I don't get the right result Getting something like this:

?encoder=%5Bobject%20Object%5D&map=%5Bobject%20Map%5D

Answer 1

The error explains itself. You must pass queryParams with type Params for it to work correctly. You may construct an object then iterate through all your params setting the value in object. Then pass the object to queryParams. For example -

const params: HttpParams = new HttpParams().set('page', '2');
const queryParams = {};
params.keys().forEach((key) => {
    queryParams[key] = params.get(key);
});
this.router.navigate([''],{queryParams});

Answer 2

Thank you, @pawan-sharma. Your response was very helpful, in that it helped me figure out that I could do this to dynamically create a Params obj.

   const params: Params = {};
    if (!!this.vm.currentRequest.state) { params['state'] = this.vm.currentRequest.state };
    if (!!this.vm.currentRequest.msaId) { params['msaId'] = this.vm.currentRequest.msaId };
... etc
    return this.router.createUrlTree([], { relativeTo: this.activatedRoute, queryParams: params }).toString();