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