How to pass array of strings in route?

Question

Here I define the route in the angular 10 project:

const routes: Routes = [
  { path: '', component: component1},
  { path: 'myComponent/:dataId', component: component2}
];

I also have this array:

let myArr:string = ["5","4","7","2"]

In route, I pass dataId as a parameter as you can see above but I also need to pass myArr in the route as a parameter.

My question is how to pass an array of string as a parameter in route?

maybe routerLink can help routerLink="['/myComponent/:dataId/', {arrValues:[myArr}]" I had saved this link a while ago stackblitz.com/edit/angular-jeqbbd — Maddy
– Maddy, Commented Oct 27, 2020 at 3:53
the array is exactly like that or u have a complex object array ? — Hansaka Sandaruwan
– Hansaka Sandaruwan, Commented Oct 27, 2020 at 4:38

Hansaka Sandaruwan · Accepted Answer · 2020-10-27 05:04:33Z

2

You can pass the array as a queryParams by JSON.stringify. And use JSON.parse to get the array in target page.

    this.route.navigate(["myComponent/id"], {
      queryParams: {
        prop: JSON.stringify(myArr)
      }
    });

In the myComponent

    this.route.queryParams.subscribe(params => {
      console.log(JSON.parse(params.prop))
    })

if the myArr is a complex object array this might doesn't work as expected.

answered Oct 27, 2020 at 5:04

5214 silver badges13 bronze badges

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

Comments

Mujadid Mughal · Accepted Answer · 2020-10-27 10:12:47Z

1

You can simply pass your array of numbers as comma separated string to your route parameter. Something like this..

<a routerLink="/myComponent/1,2,3,4,5">Second Component</a>

And you can read the parameter, from the activatedRoute service snapshot and convert it back to array of numbers. Something like this.

this.idsArr = this.activatedRoute.snapshot.params.dataId
  .split(",")
  .map(x => {
    return parseInt(x);
  });

answered Oct 27, 2020 at 10:12

Mujadid Mughal

2,67119 silver badges16 bronze badges