Angular response headers value

Question

I get a request from WP Rest Api in Angular

service.ts

get(): Observable<any>{
return  this.http.get<any>('mysite.com/posts?categories=4&per_page=2'));
}

app-component.ts

  ngOnInit() {
this.RestApi.get()
  .subscribe(
    e => {
      console.log(e);
      console.log('headers: ' + e.headers);
    });}

response

DevTools - Network 1 : https://i.stack.imgur.com/HBI7i.png

DevTools - Console:

(2) [{…}, {…}]
    0: {id: 100, date: "2018-02-27T18:38:59", ...}
    1: {id: 98, date: "2018-02-27T18:38:34", ...}
    length: 2__proto__: Array(0)

headers: undefined

So, why in Network I see Response Headers, but in Console I have undefined? How I can get value of 'X-WP-TotalPages'? What I do wrong?

Thx for attention! I hope for your help :)

Answer 1

http.get(...) does not return an object with a headers property at all.

https://angular.io/api/common/http/HttpClient#get

If you use the observe option you can get the full response like so:

this.http.get<Config>('mysite.com/posts?categories=4&per_page=2', { observe: 'response' });

https://angular.io/guide/http#reading-the-full-response

Answer 2

You will need to pass { observe: 'response' } option into your http.get method so that it can return an Observable of typed HttpResponse rather than just the JSON data.

To show each of the headers, you can do something like this

this.RestApi.get()
  .subscribe(
    e => {
      console.log(e);
      // debugger; 
      this.headers = e.headers.keys().map(key =>
        console.log(`${key}: ${e.headers.get(key)}`));
    });
}

Also you could set a debugger in the code (uncomment the line) so that the browser will break right at the line, and then you can inspect the values as needed.