Passing the array as query parameters and retrieving it using the angular getAll function is the most efficient way

When using this function, I extract the ids of items and aim to send them as an array for retrieval with getAll().

    const queryParams: Record<string, string[]> = selectedItems.reduce(
      (acc, curr, index) => ({
        ...acc,
        ['item'] : curr.id
      }),
      {}
    );

    this.router.navigate(['/goToItems'], {
      queryParams
    });

I attempted a similar approach but was unable to achieve an array. My goal is to generate something like this:

  this.router.navigate(['/goToItems'], {
      item: [1, 2, 3, 4, 5] // this array should be queryParams
    });

If you have any suggestions on how to implement this, please share them with me. Thank you!

Answer №1

To successfully transmit the data, ensure it is included in the queryParams property. Use the code snippet below:

this.router.navigate(['/showItems'], {
  queryParams: { items: [6, 7, 8, 9, 10] }
});

To retrieve the data on the receiving end, use the following method:

this.route.snapshot.queryParamMap.get('items');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An error occurred while trying to load the configuration "next/core-web-vitals" for extension

If you're embarking on a new project using NextJs and TypeScript, chances are you may encounter the following error: Failed to load config "next/core-web-vitals" to extend from. Wondering how to resolve this issue? ...

When running npm install, an ERESOLVE error message may appear indicating that a resolution could

Upon executing npm install, I encounter the following error message: code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @angular-devkit/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8baadb1b ...

When using Angular to send a request body containing IFormFile to an ASP.NET Core Web API, the properties are unexpectedly null

I am facing an issue with sending a request body as an object from Angular to ASP.NET Core Web API. All the properties are coming up as null except for ID. Here is the structure of my Web API: public class Book { public int BookID { get; set; } pu ...

In order to launch an Angular project

Currently, I am in the process of creating a VSS web extension using Angular... To generate a .vsix file, I need to reference an HTML file. The challenge arises when working with Angular because we typically use ng serve which loads our page at http://lo ...

What is the method for nesting data within a component's child>child>child structure?

In the structure I am working with, there is a hierarchy: Root component buttons (menu search component) - an input field for searching Widgets (widget component ) (Cats widget) - displays what is input in the menu search here. My challen ...

What is the reason behind document.body not being recognized as an HTMLBodyElement?

Why does Visual Studio suggest that document.body is an HTMLElement instead of an HTMLBodyElement? I've searched for an answer without success. class Test { documentBody1: HTMLBodyElement; documentBody2: HTMLElement; cons ...

An issue has occurred with ng-material-multilevel-menu: NullInjectorError - MultilevelMenuService provider is missing. This problem is specific to

I have been working with Angular 12 and I am looking to integrate the ng-material-multilevel-menu plugin. Following this link, I tried implementing the multilevel menu. Although it compiled successfully, I encountered an error in the browser. After some ...

Tips for passing a query parameter in a POST request using React.js

I am new to working with ReactJS and I have a question about passing boolean values in the URL as query parameters. Specifically, how can I include a boolean value like in a POST API call? The endpoint for the post call is API_SAMPLE: "/sample", Here is ...

get a collection of chosen files in angular 7 and save them to

Greetings, I am currently working on a project and encountering an issue. I need to download multiple selected files from a list, but despite my efforts in searching for a solution, I have been unable to find one. While I can successfully download single f ...

The data type '{}' cannot be assigned to the type 'WebElement'

Background: I am in the process of updating the end-to-end tests to utilize async/await functionality. However, when attempting to modify the function (with a return type promise.Promise < WebElement>) to be asynchronous and calling it from the test, I ...

Adjust the color of the entire modal

I'm working with a react native modal and encountering an issue where the backgroundColor I apply is only showing at the top of the modal. How can I ensure that the color fills the entire modal view? Any suggestions on how to fix this problem and mak ...

The mapStateToProps function in a Higher Order Component is receiving an OwnProps argument with a property that is not defined

I'm a new user of react-redux trying to connect a higher-order component to the react-redux store. In the mapStateToProps function, I'm using the ownProps argument to filter the state. However, the property I'm trying to use within OwnProps ...

Creating a mandatory and meaningful text input in Angular 2 is essential for a

I am trying to ensure that a text material input in my app is mandatory, with a message like "Please enter issue description." However, I have noticed that users can bypass this by entering spaces or meaningless characters like "xxx." Is there an npm pac ...

Issue with npm resolution due to package requiring another third-party dependency

I'm encountering an issue with a requirement and I'm hoping for some assistance. I currently have a package called @unicoderns/orm that relies on mysql, which can be found at https://github.com/unicoderns/ORM Now I'm working on developing ...

Utilize Function type while preserving generics

Is there a way in Typescript to reference a function type with generics without instantiating them, but rather passing them to be instantiated when the function is called? For instance, consider the following type: type FetchPageData<T> = (client : ...

Sass Alert: The mixin called roboto-family is missing from the stylesheet. Trace: Problem detected in src/pages/forms/forms.scss at

Greetings, I am diving into the world of Ionic for the first time. Recently, I embarked on a new project in Ionic and decided to integrate a theme. To do so, I copied an .html file, an .scss file, and also created a .ts file. Forms.html <!DOCTYPE html ...

Issue: Unable to find solutions for all parameters in (?, ?)

Below is the unit test I've written for my Angular 10 component, which showcases a tree view with interactive features: import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/for ...

Protractor experiencing difficulty in adjusting price slider

As a newcomer to protractor, I am attempting to test a price slider that sorts products based on the provided price range. Unfortunately, I am facing difficulty in dragging the slider (min point) using protractor. Can anyone provide guidance on how to move ...

Angular 7: Implementing a Dynamic Search Filtering System

I'm looking to create a versatile filter in Angular 7 that can perform search operations on any field across multiple screens. Custom pipe filters I've come across only seem to work with specific static fields, limiting their use. Let me provide ...

The type 'undefined' cannot be assigned to type 'Element or null'

One of the components I am using looks like this: const data: any[] = [] <Tiers data={data}/> This is how my component is structured: const Tiers = ({ data, }: { data?: any; }) => { console.log('data', data?.length!); ...