[Angular] Read Custom HTTP Headers Sent by the Server in Angular

By default the response body doesn’t contain all the data that might be needed in your app. Your server might return some special header which you have to read explicitly. In such case we can use the { observe: ‘response’} configuration of the Angular HttpClient. Let’s explore how.

 

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

export interface Person {
  name: string;
}

@Injectable()
export class PeopleService {

  constructor(private http: HttpClient) {}

  fetchPeople(): Observable<HttpResponse<Person>> {
    return this.http
      .get<Person>('data/people.json', { observe: 'response'});
  }
}

 

Now instead of just returning your data, it returns your response object.

 {
  "headers": {
    "normalizedNames": [],
    "lazyUpdate": null
  },
  "status": 200,
  "statusText": "OK",
  "url": "https://run.plnkr.co/preview/cjdn2x8fh000ffillqi8d3o4k/data/people.json",
  "ok": true,
  "type": 4,
  "body": [
    {
      "name": "xxx"
    },
    {
      "name": "xxx"
    }
  ]
}