Angular HTTPHeaders Example

In this guide let us explore how to add HTTP Headers to an HTTP request in Angular. There are two ways by which we can add the headers. One, we add the HTTP Headers while making a request. The second way is to use the HTTP interceptor to intercept all the Requests and add the Headers. In both cases, we use the httpHeaders configuration option provided by angular HttpClient to add the headers.

HTTP Headers let the client and the server share the additional information about the HTTP request or response. For example, we use the content-type header to indicate the media type of the resource like JSON, text, blob, etc. Another important header is where you send the bearer token using the Authorization header 'Authorization', 'Bearer <yourTokenhere>'

Applies to : Angular 4 to latest edition i.e Angular 8, Angular 9, Angular 10

HttpHeaders

We add HTTP Headers using the HttpHeaders helper class. It is passed as one of the arguments to the GET, POST, PUT, DELETE, PATCH & OPTIONS request.

To use HttpHeaders in your app, you must import it into your component or service

Then create an instance of the class

And then call the httpClient.get method passing the headers as the argument

Note that httpHeaders are immutable. i.e every method on HttpHeaders object does not modify it but returns a new HttpHeaders object.

The httpHeaders class has several methods using which you can manipulate the headers.

set

set(name: string, value: string | string[]): HttpHeaders

The Sets method returns a new instance after modifying the given header. If the header already exists, its value is replaced with the given value in the returned object.

httpHeaders are immutable

The HTTP headers are immutable. The following example does not work as each set method returns a new header and does not update the original header.

To work around, you can use the code as follows

You can also use the following code

append

append(name: string, value: string | string[]): HttpHeaders

The append method appends a new value to the existing set of values for a header and returns a new instance. The append method does not check if the value exists.

The above results in content-type header in the request header as content-type: application/json,application/x-www-form-urlencoded

has

has(name: string): boolean

Returns true if the given header with the name already exists in the HttpHeaders. The following code checks if the content-type header present in the request header. If not it adds it.


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

get

get(name: string): string | null

Get the first value for the given header name, or null if it’s not present.

getAll

getAll(name: string): string[] | null

Get all the headers for the given header name, or null if it’s not present.

Keys

keys(): string[]

Get all the headers for this request.

delete

delete(name: string, value?: string | string[]): HttpHeaders

Deletes the header and returns the new headers.  You can delete using the header name or by using the name & value.

HttpHeaders from object

The following code shows how you can create a HttpHeaders from an object.

Using HTTP Interceptor

Most headers we add to the HTTP Request in the entre application likely to remain the same. Adding them to every GET, POST, PUT, etc requests are cumbersome. Instead, you can make use of the HTTP Interceptors to intercept every request and add the commonly used headers. Refer to our tutorial on how to set HttpHeaders using HTTP Interceptors

HttpHeaders Example

Refer to our tutorial on HTTP Post example.

The code requires you to set up a fake backend server using json-server. Install json server using the following command.

Create a db.json file with some data.

Start the server with the following command. The server will run on the port http://localhost:3000/

Code

person.ts

app.module.ts

app.component.ts

app.component.html

app.routing.module.ts

app.service.ts

Summary

We learned how to add/modify the HTTP Headers using the HttpHeaders in Angular.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top