This is a quick guide on how to pass an array of values via query string in Angular. This is working in Angular 9+ as of 13/04/2020 but will most likely work just fine for any version from Angular 2+.
In the example below we will create an array of values in ComponentA and pass them to ComponentB via navigation. This method will work for a direct navigation to ComponentB via a link and also via programmatic navigation with the Angular router.
The short version is: JSON.stringify your array and pass it as query param, thend JSON.parse it back into an array after navigation
Component A - Passing the array
export class ComponentA {
// We need access to the Angular router object to navigate programatically
constructor(private router: Router){}
navigateWithArray(): void {
// Create our query parameters object
const queryParams: any = {};
// Create our array of values we want to pass as a query parameter
const arrayOfValues = ['a','b','c','d'];
// Add the array of values to the query parameter as a JSON string
queryParams.myArray = JSON.stringify(arrayOfVAlues);
// Create our 'NaviationExtras' object which is expected by the Angular Router
const navigationExtras: NavigationExtras = {
queryParams
};
// Navigate to component B
this.router.navigate(['/componentB'], navigationExtras);
}
}
Component B - parsing the array
export class ComponentB {
// Where we will be storing the values we get from the query string
arrayOfValues: Array<string>;
// We need use the ActivatedRoute object to get access
// to information about the current route
constructor(private activatedRoute: ActivatedRoute){
// Get the query string value from our route
const myArray = this.activatedRoute.snapshot.queryParamMap.get('myArray');
// If the value is null, create a new array and store it
// Else parse the JSON string we sent into an array
if (myArray === null) {
this.arrayOfValues = new Array<string>();
} else {
this.arrayOfValues = JSON.parse(myArray));
}
}
}
Top comments (5)
No need for that. Just use:
this.router.navigate(["/componentB"], {queryParams: { myArray: arrayOfValues },
});
And then:
const myArray = this.activatedRoute.snapshot.queryParams.myArrayThank 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])
You are confusing route params with query params.
/componentb/:idswill only match on/componentb/1etc but not/componentb.In this scenario
:idsis a ROUTE param, you need a query param.You will need to change the route to
and then navigate as follows
This uses query params. The url will be like this
/componentb?ids=['a','b','c','d']Great tutorial ! Thanks
You are most welcome friend