Set header for http request in Angular

Angular 4HeaderCustom headerAngular 4.3.1

In this article we will be discussing about passing headers for http request. Most of the applications will be passing some ticket for all http calls, this will help to improve the security of the application. Let us check with an example how we can pass a header for http request. I have explained the same using angular js 1 concept as well , if you want to compare both implementations you can check this link.

If you are using angular version 4.3 or above check this link:- Set header for http request in angular 5(4.3+)

Pass header for single http request.

---

I have used Angular 4.0.0 version to do this. Check below code for more info.

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';


@Injectable()
export class userDataService {
    _url: string;
    constructor(private http: Http) { }

    getUserslist(): Observable<any[]> {

        this._url = 'your api';

        const headers = new Headers();
        headers.set('authentication', 'auth ticket');
        const options = new RequestOptions({ headers: headers });

        return this.http.get(this._url, options)
            .map(this.handleData)
            .catch(this.handleError);
    }
}

You can append more values as well like below example.

const headers = new Headers();
headers.set('authentication', 'auth ticket');
headers.append('authentication1', 'auth ticket1'); 

We are done, invoke the API and check network tab. If you want to know more about http call and different methods check this link.

Pass headers for all http headers using Angular interceptor.

---

We have already discussed about how we can pass headers to a single http request. Now let us check with another example, where we can pass headers for all https calls using Angular interceptor concept. Unfortunately this required Angular 4.3.1 version. Update your angular version to try this. Create a ts file and name it as httpInterceptorClass (any name).

import { Injectable } from '@angular/core';
import { HttpInterceptor,HttpRequest,HttpHandler,HttpEvent} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
 
@Injectable()
export class httpInterceptorClass implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const customHeaderRequest = request.clone({
      headers: request.headers.set('authTicket', '#112222')
    });
 return next.handle(customHeaderRequest);
  }
}

We are done.

Since you have already upgraded Angular version, try below code for setting headers for single http header as well.

const headers = new HttpHeaders()
      .set('authTicket', '#112222');

In this article we have discussed about passing header for all http calls and also for single http request as well.

Angular 4HeaderCustom headerAngular 4.3.1

Related Info

1. Http calls in Angular with simple examples.

2. Disable submit button until all mandatory fields are filled - Angular

3. Angular client side pagination.

4. Angular show more/less pagination