Angular: Exploring the Distinctions Between params and setParams in HttpRequest.clone()

One of my interceptors contains the following code:

intercept(request, next) {
  const _id = 1
  const _token = "foo"
  return next.handle(request.clone({ 
    setParams: {
     user_id: _id,
     user_token: _token
    }
  });
}

I recently observed that instead of using setParams, there is a params field being used?

Upon reviewing the Angular website documentation for the HttpRequest class, I could not find any information related to this change. While it showed both fields existed, no details were provided.

Could it be possible that params acts as a hard override while setParams allows for the addition of extra Key->Value pairs to the request?

Answer №1

When utilizing the HttpRequest.clone() method, you have the option to pass an object called update:

clone(update: { headers?: HttpHeaders; reportProgress?: boolean; 
  params?: HttpParams; responseType?: "arraybuffer" | "blob" | "text" | "json"; 
  withCredentials?: boolean; body?: T; method?: string; url?: string; 
  setHeaders?: { ...; }; setParams?: { ...; }; }): HttpRequest<T>
  • params - This allows you to overwrite existing HTTP parameters by assigning them using an HttpParams instance.
  • setParams - You can also append HTTP parameters by using an object literal where the keys represent the parameter names to be added.

View the source code for the clone() method

clone(update: {
  headers?: HttpHeaders,
  reportProgress?: boolean,
  params?: HttpParams,
  responseType?: 'arraybuffer'|'blob'|'json'|'text',
  withCredentials?: boolean,
  body?: any|null,
  method?: string,
  url?: string,
  setHeaders?: {[name: string]: string | string[]},
  setParams?: {[param: string]: string};
} = {}): HttpRequest<any> {
  // Code logic for cloning
}

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

Is it possible for a factory provider to include optional dependencies?

As an illustration: @NgModule ({ providers: [ { provide: MyService, useFactory: (optionalDependency) => new MyService(optionalDependency) deps: [ANOTHER_DEP] } }) class MyModule {} Is it possible for useFactory to include optio ...

Utilizing the expression in *ngIf directive in Angular 2 allows for

Currently, I am exploring the possibility of utilizing a function's return value in *ngIf within Angular 2. I conducted an experiment <ion-fab right bottom *ngIf="shouldDisplayFlag()"> Unfortunately, an error is being encountered during this ...

"Exploring the possibilities with Jhipster and Angular 4 (Starting with a clean

I am currently working on developing an app using jhipster and angular 4. It is functioning properly with Angular JS, but when I switch to Angular 4, the app runs without any errors, yet displays a blank page. How can I resolve this issue? EDIT : Upon r ...

Posting data from an Angular 2 frontend to an Express server: A step-by-step

Seeking guidance as a beginner trying to understand the process of sending contact form data from Angular 2 to a Node/Express server. Currently, I have Angular 2 hosted on localhost:4200 and the express server running on localhost:3000. However, when attem ...

Oops! An unexpected error occurred while parsing the JSON response

While working with my Json file, I encountered an error that has been validated on https://jsonlint.com/ @Injectable() export class LightParserService{ ITEMS_URL = "./lights.json"; constructor(private http: Http) { } getItems(): Promise<Light[ ...

How to retrieve parent data within a dynamic child component in Angular 5

Source Code : https://stackblitz.com/edit/dynamic-child-inside-parent-component Description of the Code : In my project, I have a functionality where child components are dynamically created when a button in the parent component is clicked. The parent co ...

Dealing with Event Handler Efficiency Problems in Angular 4/5

Excuse me if my question seems trivial, but we are currently experiencing a latency problem in our application. The culprit appears to be the KEYPRESS event handler. Throughout our entire application, we have implemented a directive that utilizes HostListe ...

What is the best way to define a boundary in my multipart/form-data request?

When attempting to send form-data files to my backend, I encountered an issue where the browser or server was consistently ignoring the boundary I had defined. Instead, it was changing the request payload to a randomly generated WebKitFormBoundary. This i ...

The Angular Production Build remains substantial in size despite incorporating options like --aot, --build-optimizer, and disabling source maps

In my application, I have almost 17 modules with sizes that are insignificant when compared to the output generated by Angular. chunk {common} common.chunk.js (common) 2.18 MB chunk {main} main.bundle.js (main) 4.42 MB [initial] [rendered] chunk {polyfil ...

Showing nested routes component information - Angular

I am working on a project that includes the following components: TodosComponent (path: './todos/'): displaying <p>TODO WORKS</p> AddTodosComponent (path: './todos/add'): showing <p>ADD TODO WORKS</p> DeleteTo ...

Incapable of adding a singular string to an array without altering the string's original value

Introducing the edit-customer component, a dialog window designed to receive an injected object from another component and display its properties, such as name and email. Below is the code for this component: HTML <form [formGroup]="editForm"> ...

Tips for accessing property values with TypeScript in Angular 7

I am facing an issue with retrieving the value of countOnProgress from my property. The problem is that I can successfully get the value of countOnProgress when I subscribe to it, but outside of the subscription, countOnProgress returns 0. This means that ...

Exploring the functionality of Typescript classes in a namespace through Jest testing

Within a certain namespace, I have created a method like so: // main.ts namespace testControl { export const isInternalLink = (link: string) => { return true; } } I also have a jest spec as shown below: // main.spec.ts test('sh ...

Error: Unable to access the 'invalid' property of a null object - Issue with Angular Reactive Forms

In my Angular application, I have implemented a reactive form to allow users to input IP address ranges. This form utilizes a FormBuilder to create a FormArray with two text input form controls. The code for setting up the form and managing its elements is ...

The date format being sent by Angular to Java is incorrect, resulting in the inability to create an object in the

In my coupon system, I am experiencing an issue with the date format. The Java coupon bean has a date.sql startDate and endDate, while the Angular coupon model includes startDate:Date and endDate:Date in its constructor. However, when I display the dates o ...

Is there a way to create dynamic documents in Firestore using Angular?

How can I use a dynamic ID to fetch the values of a document in Firestore? For example, if I have documents named document1 and document2 under the same collection, how can I specify a dynamic path with a dynamic document name to retrieve the specific do ...

Trouble encountered while using useRef in TypeScript

I'm encountering an issue with the code below; App.tsx export default function App() { const [canvasRef, canvasWidth, canvasHeight] = useCanvas(); return ( <div> <canvas ref={canvasRef} /> </div> ) ...

Angular Material drag and drop coupled with cdk virtual scrolling can lead to unexpected jumps in the previousIndex

In my Angular app using Angular Material, I've incorporated drag and drop lists including one with virtual scrolling. However, I encountered an issue where the drop event's previousIndex value unexpectedly changes to different values for certain ...

react - Arrow body should not be enclosed in a block statement

I am working with an array const reportOptions = [ { id: 1, title: 'Report', }, { id: 2, title: 'Report 2', }, { id: 3, title: 'Report 3', }, ] My goal is to create a new state as shown be ...

Troubleshooting NGINX and NodeJS (Docker) issue on Synology Server

I've set up a docker-compose file that does the following: Starts Postgres DB Builds and starts NestJS (NodeJS) backend on localhost:3000 Builds and starts an Angular app on localhost:4200 inside of an NGINX container After following these instructi ...