Setting headers and params in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

Headers carry extra information with the request, like content type or authorization tokens, helping the server understand how to process the request.

beginner

How do you add query parameters to an Angular HTTP GET request?

You use the HttpParams class to build key-value pairs and pass it in the options object under the 'params' property.

intermediate

Show a simple example of setting a custom header 'Authorization' in an Angular HTTP GET request.

const headers = new HttpHeaders().set('Authorization', 'Bearer token123');
this.http.get(url, { headers }).subscribe();

intermediate

What happens if you try to set headers or params directly as plain objects in Angular HTTP requests?

Angular accepts plain objects for headers and params, automatically converting them to HttpHeaders and HttpParams internally. However, using the dedicated classes is recommended for immutability, chainability, and advanced features.

advanced

Why is immutability important when working with HttpHeaders and HttpParams in Angular?

HttpHeaders and HttpParams are immutable, so methods like set() return new instances. You must assign the result to keep changes.

Which Angular class is used to add query parameters to an HTTP request?

A HttpHeaders

B HttpParams

C HttpClient

D HttpRequest

HttpParams is designed to hold query parameters for HTTP requests.

How do you add a header named 'Content-Type' with value 'application/json' in Angular?

A { 'Content-Type': 'application/json' }

B httpClient.setHeader('Content-Type', 'application/json')

C httpClient.headers('Content-Type', 'application/json')

D new HttpHeaders().set('Content-Type', 'application/json')

HttpHeaders is immutable and set() returns a new instance with the header added.

What must you do after calling set() on HttpParams to keep the changes?

A Assign the result to a variable

B Call apply() method

C Nothing, it changes in place

D Call update() method

HttpParams is immutable; set() returns a new instance that must be saved.

Which option correctly passes headers and params in an Angular HTTP GET request?

A http.get(url, { headers: myHeaders, params: myParams })

B http.get(url, myHeaders, myParams)

C http.get(url, { header: myHeaders, param: myParams })

D http.get(url, { headers: myHeaders, query: myParams })

Headers and params must be passed inside an options object with keys 'headers' and 'params'.

Why should you use HttpHeaders and HttpParams instead of plain objects?

A Plain objects automatically convert to headers and params

B Plain objects are faster but less secure

C Because Angular expects these classes for proper request formatting

D HttpHeaders and HttpParams are deprecated

While plain objects are accepted and converted, using HttpHeaders and HttpParams instances provides immutability, chainability, and proper handling for complex cases.

Explain how to set custom headers and query parameters in an Angular HTTP GET request.

Think about how Angular expects headers and params as special objects.

Describe why immutability matters when working with HttpHeaders and HttpParams in Angular.

Consider what happens if you forget to assign the result of set().

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