DEV Community

Discussion on: Angular - How to pass arrays via Query Parameters

View post
Collapse
 
ramki profile image
Ramakrishna Gottipat •

Thank you for the tutorial..!!

How do we define router path if we pass array of values with query param?

const routes: Routes = [
{ path: 'componentb/:ids', component: componentb }
];

It is working fine if i pass array of parameters like below , With query param i am getting Cannot match any routes error.

const arrayOfValues = ['a','b','c','d'];
const ids = JSON.stringify(arrayOfValues);
this.router.navigate(['/componentb', ids])

Collapse
 
shane profile image
Shane McGowan •

You are confusing route params with query params.

/componentb/:ids will only match on /componentb/1 etc but not /componentb.
In this scenario :ids is a ROUTE param, you need a query param.

You will need to change the route to

const routes: Routes = [
{ path: 'componentb', component: componentb }
];
Enter fullscreen mode Exit fullscreen mode

and then navigate as follows

this.router.navigate(
    ['/componentb'],
    { queryParams: { ids:  ids} }
  );
Enter fullscreen mode Exit fullscreen mode

This uses query params. The url will be like this /componentb?ids=['a','b','c','d']