[Angular] Set Metadata in HTTP Headers with Angular HttpHeaders

Besides sending (or requesting) the actual data to the server API, there’s also often the need to send further metadata that helps the server to correctly interpret our request. Such data is most often sent using HTTP headers. In this lesson we learn how to leverage Angular’s HttpClient to set such headers. Note that when you have to continuously send certain application headers to the backend, for each single HTTP call that is being made, you may be better served by placing them in an HTTP interceptor.

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

@Injectable()
export class PeopleService {

  constructor(private http: HttpClient) {}

  fetchPeople(): Observable<Object> {
    return this.http
      .get('data/people.json', {
        headers: new HttpHeaders().set('app-language', 'en')
      });
  }

}