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.