Setting headers and params in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What headers and params are sent in this Angular HTTP request?

Consider this Angular service method that makes an HTTP GET request:

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

getData() {
  const headers = new HttpHeaders().set('Authorization', 'Bearer token123');
  const params = new HttpParams().set('page', '2').set('limit', '10');
  return this.http.get('/api/items', { headers, params });
}

Which headers and query parameters will be included in the request?

A Headers: Authorization=Bearer token123; No params sent

B Headers: Authorization=Bearer token123; Params: page=2, limit=10

C Headers: Authorization=Bearer token123; Params: page=10, limit=2

D Headers: Authorization=token123; Params: page=2, limit=10

💡 Hint

Look at how HttpHeaders and HttpParams are set with set method.

The HttpHeaders object sets the 'Authorization' header with the exact string 'Bearer token123'. The HttpParams object sets two query parameters: 'page' with value '2' and 'limit' with value '10'. These are sent with the GET request.

📝 Syntax

intermediate

Which option correctly adds multiple headers in Angular HttpHeaders?

Given the need to add two headers: 'Content-Type' as 'application/json' and 'Accept' as 'application/json', which code snippet correctly creates the HttpHeaders object?

A const headers = new HttpHeaders().set('Content-Type', 'application/json').set('Accept', 'application/json');

B const headers = new HttpHeaders({'Content-Type': 'application/json', 'Accept': 'application/json'});

C const headers = new HttpHeaders().append('Content-Type', 'application/json').append('Accept', 'application/json');

D const headers = new HttpHeaders().set('Content-Type', 'application/json'); headers.set('Accept', 'application/json');

💡 Hint

Remember that HttpHeaders is immutable and methods return new instances.

Option A chains set calls correctly, each returning a new HttpHeaders instance with the added header. Option A works but is less common. Option A uses append which adds multiple values for the same header, not needed here. Option A calls set on the original object without reassigning, so the second header is not added.

🔧 Debug

advanced

Why does this Angular HTTP request not send the expected query parameters?

Look at this code snippet:

let params = new HttpParams();
params.set('search', 'books');
params.set('sort', 'asc');
this.http.get('/api/products', { params }).subscribe();

Why are the query parameters missing in the request?

A Because the <code>get</code> method requires headers to send params.

B Because <code>HttpParams</code> does not support multiple parameters.

C Because <code>HttpParams</code> is immutable; <code>set</code> returns a new instance but the code ignores it.

D Because the <code>subscribe</code> method must be called before setting params.

💡 Hint

Check how HttpParams methods work regarding immutability.

HttpParams is immutable. Calling set returns a new HttpParams instance with the added parameter. The original params variable remains unchanged. The code should reassign the result of set back to params.

❓ state_output

advanced

What is the final value of headers after this Angular code runs?

Consider this code:

let headers = new HttpHeaders();
headers = headers.set('X-Custom', '123');
headers.set('Authorization', 'token');

What headers will be sent if headers is used in an HTTP request?

A Headers: X-Custom=123 only

B Headers: X-Custom=123 and Authorization=token

C Headers: Authorization=token only

D No headers sent

💡 Hint

Remember that HttpHeaders methods return new instances and do not mutate the original.

The first set call assigns a new HttpHeaders instance with 'X-Custom' header to headers. The second set call creates a new instance with 'Authorization' header but does not assign it back, so headers remains unchanged from the first call.

🧠 Conceptual

expert

How does Angular's HttpParams handle multiple values for the same key?

Which statement best describes how Angular's HttpParams manages multiple values for the same query parameter key?

A <code>HttpParams</code> merges multiple values into a comma-separated string automatically.

B <code>HttpParams</code> throws an error if you try to add multiple values for the same key.

C <code>HttpParams</code> overwrites previous values for a key; multiple values are not supported.

D <code>HttpParams</code> allows multiple values per key using <code>append</code>, resulting in repeated keys in the URL.

💡 Hint

Think about how to add multiple values for the same parameter in a URL query string.

HttpParams supports multiple values for the same key by using the append method. This results in repeated keys in the URL query string, like ?key=value1&key=value2. The set method replaces existing values.

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()