home / blog April 13th, 2020

Angular - How to pass arrays via Query Parameters

How to pass an array of values via query parameter in Angular.

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, then 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 = {
      // 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;
    // 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();
      } else {
        this.arrayOfValues = JSON.parse(myArray));