Angular router.navigate use array as list of queryParams

Question

Im navigating after building up a queryParams object with a form:

options {
    ...
    words: (4) ["chuck", "norris", "vs", "keanu", "reeves"]
}

Then navigate with that object to update the URL's parameters:

this.router.navigate(['/search'], { queryParams: options });

The URL words param is duplicated for each entry like this:

/search?words=chuck&words=norris&words=vs&words=keanu&words=reeves

How do we pass in an array to queryParams properly?

Links: angular.io/api/router/Router#navigate alligator.io/angular/query-parameters

queryParamsHandling has no affect on this. Here is a StackBlitz repro.

Answer 1

You're doing it the correct way, just use params.getAll in your /search component:

words: string[];

constructor(private route: ActivatedRoute) {
}

ngOnInit() {
  this.route.queryParamMap.subscribe(params => this.words = params.getAll('words'));
}

---

Update: working example on stackblitz: angular-query-params-pass-array