Dynamically create query Params in Angular 2

Question

i want to achieve that the queryParams can be dynmamically passed it. For now i can set the values of the params dynamically, but not the keys

Here is my Code

onItemClick(item: FilterItem, group: FilterGroup, i: number) {

    let navigationExtras: NavigationExtras = {
      queryParams: { name : group.items[i].param }
    };
     this.router.navigate(['/search'], navigationExtras);
  }

I cannot put instead of "name" my group.name which is a string. I tried this:

 queryParams: { group.name: group.items[i].param }

But here i get syntax error. How can i put the "key" of a queryParam through an object like that?

Community · Accepted Answer · 2017-05-23 12:32:30Z

13

This should work:

 queryParams: { [group.name]: group.items[i].param }

See also Creating object with dynamic keys

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Mar 19, 2017 at 17:28

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

9 Comments

Günter Zöchbauer Over a year ago

Glad to hear :)

Dipesh Over a year ago

And what will happen if I group.name and group.items[i].param come as blank...will it redirect without parameter...I want to make anchor dynamic for different pages which of them would not have parameters..please respond

Günter Zöchbauer Over a year ago

Sorry, don't know by heart. Just try it.

Drenai Over a year ago

Cant get this to work in the template e.g. [queryParams]="{[queryField]: queryValue}". Any ideas?

Günter Zöchbauer Over a year ago

I guess this is not supported in the template. Assign it to a field in the comonents class and bind to that field.

|

Collectives™ on Stack Overflow

Dynamically create query Params in Angular 2

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related