Setting headers and params in Angular - Step-by-Step Execution

Concept Flow - Setting headers and params

Create HttpHeaders object

↓

Create HttpParams object

↓

Build HttpRequest with headers and params

↓

Send request via HttpClient

↓

Receive response

↓

Process response

This flow shows how Angular builds an HTTP request by creating headers and parameters, then sends it and processes the response.

Execution Sample

Angular

const headers = new HttpHeaders().set('Authorization', 'Bearer token');
const params = new HttpParams().set('page', '1').set('limit', '10');
this.http.get('/api/items', { headers: headers, params: params }).subscribe(response => {
  console.log(response);
});

This code sets an Authorization header and query parameters page and limit, then sends a GET request and logs the response.

Execution Table

Step	Action	Headers State	Params State	HttpClient Call	Output
1	Create HttpHeaders with Authorization	{Authorization: 'Bearer token'}	{}	No	Headers object created
2	Create HttpParams with page=1	{Authorization: 'Bearer token'}	{page: '1'}	No	Params object created with page
3	Add limit=10 to HttpParams	{Authorization: 'Bearer token'}	{page: '1', limit: '10'}	No	Params object updated with limit
4	Call http.get with headers and params	{Authorization: 'Bearer token'}	{page: '1', limit: '10'}	GET /api/items?page=1&limit=10 with headers	Request sent
5	Receive response	{Authorization: 'Bearer token'}	{page: '1', limit: '10'}	No	Response received and logged
6	End	{Authorization: 'Bearer token'}	{page: '1', limit: '10'}	No	Execution complete

💡 Request sent and response received, process ends

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
headers	{}	{Authorization: 'Bearer token'}	{Authorization: 'Bearer token'}	{Authorization: 'Bearer token'}	{Authorization: 'Bearer token'}
params	{}	{}	{page: '1'}	{page: '1', limit: '10'}	{page: '1', limit: '10'}

Key Moments - 2 Insights

Why do we chain .set() calls on HttpParams instead of calling it once?

HttpParams is immutable; each .set() returns a new object. See execution_table rows 2 and 3 where params updates step-by-step.

Can we modify HttpHeaders or HttpParams after passing them to HttpClient?

No, they are immutable. You must create new instances before the request. The execution_table shows headers and params stay unchanged after the request (rows 4-6).

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the state of params?

A {page: '1'}

B {}

C {page: '1', limit: '10'}

D {limit: '10'}

💡 Hint

Check the Params State column at step 3 in execution_table

At which step is the HTTP GET request actually sent?

A Step 4

B Step 5

C Step 2

D Step 3

💡 Hint

Look for HttpClient Call column indicating request sent

If we forget to assign the result of .set() on HttpParams, what happens?

A Params contain only the last set value

B Params remain empty

C Params contain all values set

D Code throws an error

💡 Hint

Recall that HttpParams is immutable and .set() returns a new object (see key_moments)

Concept Snapshot

Angular HTTP headers and params are immutable objects.
Use .set() to add or update values, assigning the result each time.
Pass headers and params as options in HttpClient methods.
HttpClient sends the request with these included.
Always assign new HttpParams or HttpHeaders after .set() calls.

Full Transcript

In Angular, when setting headers and parameters for HTTP requests, you create HttpHeaders and HttpParams objects. These objects are immutable, so each time you call .set(), you get a new object that you must assign to a variable. After building headers and params, you pass them as options to HttpClient methods like get(). The request is sent with these headers and query parameters included. The response is then received and processed. This flow ensures your HTTP requests have the correct metadata and query data.

Practice

1. What is the main purpose of setting headers in an Angular HTTP request?

easy

A. To change the URL of the request

B. To add extra information like authentication tokens or content type

C. To modify the HTTP method (GET, POST, etc.)

D. To handle the response data format

Solution

1. Step 1: Understand what headers do

   Headers carry extra info like tokens or content type in HTTP requests.

2. Step 2: Compare options

   Only To add extra information like authentication tokens or content type correctly describes headers' purpose; others describe different concepts.

3. Final Answer:

   To add extra information like authentication tokens or content type -> Option B

4. Quick Check:

   Headers add info = A [OK]

Hint: Headers carry extra info like tokens, not URL or method [OK]

Common Mistakes:

• Confusing headers with URL parameters
• Thinking headers change HTTP method
• Assuming headers handle response data

2. Which of the following is the correct way to add a header named Authorization with value Bearer token123 using Angular's HttpHeaders?

easy

A. new HttpHeaders().set('Authorization', 'Bearer token123')

B. new HttpHeaders('Authorization', 'Bearer token123')

C. HttpHeaders.append('Authorization', 'Bearer token123')

D. HttpHeaders.add('Authorization', 'Bearer token123')

Solution

1. Step 1: Recall HttpHeaders usage

   HttpHeaders is immutable; use set method to add headers.

2. Step 2: Check each option

   Only new HttpHeaders().set('Authorization', 'Bearer token123') uses new HttpHeaders().set() correctly; others are invalid syntax or methods.

3. Final Answer:

   new HttpHeaders().set('Authorization', 'Bearer token123') -> Option A

4. Quick Check:

   Use set() on new HttpHeaders() = B [OK]

Hint: Use new HttpHeaders().set() to add headers [OK]

Common Mistakes:

• Trying to pass headers directly to constructor
• Using non-existent methods like append or add
• Not creating a new HttpHeaders instance first

3. Given the code below, what will be the final URL requested?

const params = new HttpParams().set('page', '2').set('sort', 'name');
this.http.get('/api/items', { params }).subscribe();

medium

A. /api/items

B. /api/items?sort=name&page=2

C. /api/items?page=2

D. /api/items?page=2&sort=name

Solution

1. Step 1: Understand HttpParams chaining

   Each set returns a new HttpParams with added param; chaining adds both params.

2. Step 2: Determine param order

   Params appear in order set: page=2 then sort=name.

3. Final Answer:

   /api/items?page=2&sort=name -> Option D

4. Quick Check:

   Params chained = URL with both params in order [OK]

Hint: Chained set() adds params in order to URL [OK]

Common Mistakes:

• Assuming only last set param remains
• Ignoring param order in URL
• Forgetting to pass params in request options

4. Identify the error in this Angular HTTP request code:

const headers = new HttpHeaders();
headers.set('Content-Type', 'application/json');
this.http.post('/api/data', body, { headers }).subscribe();

medium

A. Headers must be plain object, not HttpHeaders instance

B. Missing import for HttpHeaders

C. HttpHeaders is immutable; set() does not change original headers

D. post() method requires params object

Solution

1. Step 1: Understand HttpHeaders immutability

   HttpHeaders methods like set return new instances; original is unchanged.

2. Step 2: Analyze code behavior

   Headers remain empty because set result is not assigned back.

3. Final Answer:

   HttpHeaders is immutable; set() does not change original headers -> Option C

4. Quick Check:

   HttpHeaders immutable = assign set() result [OK]

Hint: Assign set() result to headers variable [OK]

Common Mistakes:

• Not assigning set() result back
• Assuming headers object changes in place
• Confusing HttpHeaders with plain objects

5. You want to send a GET request with headers { 'Authorization': 'Bearer abc123' } and query params { 'filter': 'active', 'limit': '10' }. Which code correctly sets both headers and params in Angular?

hard

A. const headers = new HttpHeaders({ Authorization: 'Bearer abc123' });
const params = new HttpParams({ fromObject: { filter: 'active', limit: '10' } });
this.http.get('/api/users', { headers, params }).subscribe();

B. const headers = new HttpHeaders('Authorization', 'Bearer abc123');
const params = { filter: 'active', limit: '10' };
this.http.get('/api/users', { headers, params }).subscribe();

C. const headers = new HttpHeaders();
headers.set('Authorization', 'Bearer abc123');
const params = new HttpParams().set('filter', 'active').set('limit', '10');
this.http.get('/api/users', { headers, params }).subscribe();

D. const headers = new HttpHeaders().add('Authorization', 'Bearer abc123');
const params = new HttpParams().add('filter', 'active').add('limit', '10');
this.http.get('/api/users', { headers, params }).subscribe();

Solution

1. Step 1: Check header creation

   HttpHeaders constructor accepts a plain object like { Authorization: 'Bearer abc123' } for initial headers.

2. Step 2: Check params creation

   HttpParams constructor accepts { fromObject: { filter: 'active', limit: '10' } } to set multiple params at once.

3. Step 3: Verify request call

   Both headers and params are passed correctly in the request options { headers, params }.

4. Final Answer:

   Use HttpHeaders({ Authorization: 'Bearer abc123' }) and HttpParams({ fromObject: { filter: 'active', limit: '10' } }) -> Option A

5. Quick Check:

   Use constructors with objects for headers and params = C [OK]

Hint: Use HttpHeaders({}) and HttpParams({fromObject:{}}) for multiple values [OK]

Common Mistakes:

• Wrong constructor arguments or plain objects without proper instances
• Not assigning set() result due to immutability
• Using non-existent methods like add()