CODEWITHSUNDEEP
angularparametersroutesquery-string
Олег Войтинський
Олег Войтинський

Reputation: 801

Angular2+ http params to router query params

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

Upvotes: 1

Views: 549

Answers (2)

TruncatedCoDr
TruncatedCoDr

Reputation: 370

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();

Upvotes: 0

Pawan Sharma
Pawan Sharma

Reputation: 2342

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});

Upvotes: 2

Related Questions