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 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>'

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

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

Then create an instance of the class

const headers= new HttpHeaders()
  .set('content-type', 'application/json')
  .set('Access-Control-Allow-Origin', '*');

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

return this.httpClient.get(this.baseURL + 'users/' + userName + '/repos', { 'headers': headers })

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.

const headers = new HttpHeaders()
   .set('content-type', 'application/json')
   .set('Access-Control-Allow-Origin', '*');

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.

let headers = new HttpHeaders()
headers .set('content-type', 'application/json')
headers .set('Access-Control-Allow-Origin', '*')
console.log(headers); 

To workaround, you can use the code as follows

const headers= new HttpHeaders()
  .set('content-type', 'application/json')
  .set('Access-Control-Allow-Origin', '*');

You can also use the following code

let headers = new HttpHeaders()
headers=headers.set('content-type','application/json')
headers=headers.set('Access-Control-Allow-Origin', '*');
console.log(headers)

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.

let headers = new HttpHeaders()

headers=headers.append('content-type','application/json')
headers=headers.append('Access-Control-Allow-Origin', '*')
headers=headers.append('content-type','application/x-www-form-urlencoded')

console.log(headers)

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.

    let headers = new HttpHeaders()
    headers=headers.append('Access-Control-Allow-Origin', '*')
    if (!headers.has('content-type')) {
      headers=headers.append('content-type','application/json')
    }

get

get(name: string): string | null

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

let headers = new HttpHeaders()
   .set('content-type','application/json')
   .set('Access-Control-Allow-Origin', '*')
      
const h =headers.get('content-type')

if (h==null) {
  console.log('content type header not present')
} else {
  console.log(h)      //returns 'application/json'
} 

getAll

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

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

let headers = new HttpHeaders()
   .set('content-type','application/json')
   .set('Access-Control-Allow-Origin', '*')
   .append('content-type','application/x-www-form-urlencoded')

 const h =headers.getAll('content-type')
 console.log(h)

*** output
0: "application/json"
1: "application/x-www-form-urlencoded"

Keys

keys(): string[]

Get all the headers for this request.

let headers = new HttpHeaders()
    .set('content-type','application/json')
    .set('Access-Control-Allow-Origin', '*')
    .append('content-type','application/x-www-form-urlencoded')

const h =headers.keys()
console.log(h)
    
***output
0: "content-type"
1: "Access-Control-Allow-Origin"

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.

let headers = new HttpHeaders()
    .set('content-type','application/json')
    .set('Access-Control-Allow-Origin', '*')
    .append('content-type','application/x-www-form-urlencoded')

headers=headers.delete("content-type","application/json")  //delete content-type='application/json'

headers=headers.delete("content-type")   //delete all content-type headers

HttpHeaders from object

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

let headers = new HttpHeaders({ 'Access-Control-Allow-Origin': '*','content-type': 'application/json'}  )
console.log(headers)

Using HTTP Interceptor

Most headers we add to the HTTP Request in the entire application are 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.

npm install -g json-server

Create a db.json file with some data.

{
  "people": [
    {
      "id": 1,
      "name": "Don Bradman"
    },
    {
      "id": 2,
      "name": "Sachin Tendulkar"
    }
  ]
}

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

json-server --watch db.json

Code

person.ts

export class Person {
  id:number
  name:string
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms'

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';




@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
import { Person } from './person';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'http Headers Example';
  people:Person[];
  person = new Person();
  
  constructor(private apiService:ApiService) {}

  ngOnInit() {
    this.refreshPeople()
  }

  refreshPeople() {
    this.apiService.getPeopleFromObject()
      .subscribe(data => {
        this.people=data;
      })      

  }

  addPerson() {
    this.apiService.addPerson(this.person)
      .subscribe(data => {
          this.person = new Person();
        this.refreshPeople();
      })      

  }

}

app.component.html

<h1>{{title}}</h1>

<div>
  <div>
    <label>Name: </label>
    <input [(ngModel)]="person.name" />
  </div>
  <div>
    <button (click)="addPerson()">Add</button>
  </div>
</div>

<button (click)="refreshPeople()">Refresh</button>

<table class='table'>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let person of people;">
      <td>{{person.id}}</td>
      <td>{{person.name}}</td>
    </tr>
  </tbody>
</table>

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.service.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Person } from './person';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ApiService {

  baseURL: string = "http://localhost:3000/";

  constructor(private http: HttpClient) {
  }


  getPeople(): Observable<Person[]> {
    console.log('getPeople ' + this.baseURL + 'people')
    return this.http.get<Person[]>(this.baseURL + 'people')
  }

  //Adding headers
  getPeopleWithHeaders(): Observable<Person[]> {
    const headers = { 'content-type': 'application/json'}  
    console.log(headers)
    return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
  }

  //Set method
  getPeopleWithSet(): Observable<Person[]> {
    const headers = new HttpHeaders()
      .set('content-type','application/json')
      .set('Access-Control-Allow-Origin', '*');  
    console.log(headers)
    return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
  }

  //This wont work
  getPeopleWithImmutable(): Observable<Person[]> {
    const headers = new HttpHeaders()
    headers.set('content-type','application/json')
    headers.set('Access-Control-Allow-Origin', '*');

    console.log(headers)
    return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
  }

  getPeopleWithImmutable1(): Observable<Person[]> {
    let headers = new HttpHeaders()
    headers=headers.set('content-type','application/json')
    headers=headers.set('Access-Control-Allow-Origin', '*');

    console.log(headers)
    return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
  }


  getPeopleAppend(): Observable<Person[]> {
    let headers = new HttpHeaders()
    headers=headers.append('content-type','application/json')
    headers=headers.append('Access-Control-Allow-Origin', '*')
    headers=headers.append('content-type','application/x-www-form-urlencoded')
    headers=headers.append('customer-header', 'custom')
    console.log(headers)
    return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
  }

  getPeopleHas(): Observable<Person[]> {
    let headers = new HttpHeaders()
    //headers=headers.append('content-type','application/json')
    headers=headers.append('Access-Control-Allow-Origin', '*')
    if (!headers.has('content-type')) {
      headers=headers.append('content-type','application/json')
    }

    console.log(headers)
    return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
  }


  getPeopleGet(): Observable<Person[]> {
    let headers = new HttpHeaders()
      .set('content-type','application/json')
      .set('Access-Control-Allow-Origin', '*')

    const h =headers.get('content-type')
    if (h==null) {
      console.log('content type header not present')
    } else {
      console.log(h)
    }

    
    return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
  }

  getPeopleGetAll(): Observable<Person[]> {
    let headers = new HttpHeaders()
      .set('content-type','application/json')
      .set('Access-Control-Allow-Origin', '*')
      .append('content-type','application/x-www-form-urlencoded')

    const h =headers.getAll('content-type')
    console.log(h)
    
    
    return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
  }

  getPeopleKeys(): Observable<Person[]> {
    let headers = new HttpHeaders()
      .set('content-type','application/json')
      .set('Access-Control-Allow-Origin', '*')
      .append('content-type','application/x-www-form-urlencoded')

    const h =headers.keys()
    console.log(h)
    
    
    return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
  }

  getPeopleDelete(): Observable<Person[]> {
    let headers = new HttpHeaders()
      .set('content-type','application/json')
      .set('Access-Control-Allow-Origin', '*')
      .append('content-type','application/x-www-form-urlencoded')


    headers=headers.delete('content-type','application/json')

    //headers=headers.delete("content-type")
 

    console.log(headers)
    
    
    return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
  }


  getPeopleFromObject(): Observable<Person[]> {

    let headers = new HttpHeaders({ 'Access-Control-Allow-Origin': '*','content-type': 'application/json'}  )

    console.log(headers)
    
    
    return this.http.get<Person[]>(this.baseURL + 'people',{'headers':headers})
  }


  addPerson(person:Person): Observable<Person> {
    const headers = { 'content-type': 'application/json'}  
    const body=JSON.stringify(person);
    console.log(body)
    return this.http.post<Person>(this.baseURL + 'people', body,{'headers':headers})
  }
}

Summary

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