title: Angular 4.3.3 HttpClient : How get value from the header of a response?
body: <p>( Editor: VS Code; Typescript: 2.2.1 )</p>
  
  <p>The purpose is to get the headers of the response of the request</p>
  
  <p>Assume a POST request with HttpClient in a Service </p>
  
  <pre><code>import {
      Injectable
  } from "@angular/core";
  
  import {
      HttpClient,
      HttpHeaders,
  } from "@angular/common/http";
  
  @Injectable()
  export class MyHttpClientService {
      const url = 'url';
  
      const body = {
          body: 'the body'
      };
  
      const headers = 'headers made with HttpHeaders';
  
      const options = {
          headers: headers,
          observe: "response", // to display the full response
          responseType: "json"
      };
  
      return this.http.post(sessionUrl, body, options)
          .subscribe(response =&gt; {
              console.log(response);
              return response;
          }, err =&gt; {
              throw err;
          });
  }
  </code></pre>
  
  <p><a href="https://angular.io/api/common/http/HttpClient" rel="noreferrer">HttpClient Angular Documentation</a></p>
  
  <p>The first problem is that I have a Typescript error :</p>
  
  <pre><code>'Argument of type '{ 
      headers: HttpHeaders; 
      observe: string; 
      responseType: string;
  }' is not assignable to parameter of type'{ 
      headers?: HttpHeaders;
      observe?: "body";
      params?: HttpParams; reportProgress?: boolean;
      respons...'.
  
  Types of property 'observe' are incompatible.
  Type 'string' is not assignable to type '"body"'.'
  at: '51,49' source: 'ts'
  </code></pre>
  
  <p>Indeed, when I go to the ref of post() method, I point on this prototype (I Use VS code)</p>
  
  <pre><code>post(url: string, body: any | null, options: {
          headers?: HttpHeaders;
          observe?: 'body';
          params?: HttpParams;
          reportProgress?: boolean;
          responseType: 'arraybuffer';
          withCredentials?: boolean;
      }): Observable&lt;ArrayBuffer&gt;;
  </code></pre>
  
  <p>But I want this overloaded method :</p>
  
  <pre><code>post(url: string, body: any | null, options: {
      headers?: HttpHeaders;
      observe: 'response';
      params?: HttpParams;
      reportProgress?: boolean;
      responseType?: 'json';
      withCredentials?: boolean;
  }): Observable&lt;HttpResponse&lt;Object&gt;&gt;;
  </code></pre>
  
  <p>So, I tried to fix this error with this structure :</p>
  
  <pre><code>  const options = {
              headers: headers,
              "observe?": "response",
              "responseType?": "json",
          };
  </code></pre>
  
  <p>And It compiles! But I just get the body request as in json format.</p>
  
  <p>Futhermore, why I have to put a ? symbol at the end of some name of fields ? As I saw on Typescript site, this symbol should just tell to the user that it is optional ?</p>
  
  <p>I also tried to use all the fields, without and with ? marks</p>
  
  <p><strong>EDIT</strong> </p>
  
  <p>I tried the solutions proposed by <a href="https://stackoverflow.com/questions/44292270/angular-4-get-headers-from-api-response">Angular 4 get headers from API response</a>. For the map solution:</p>
  
  <pre><code>this.http.post(url).map(resp =&gt; console.log(resp));
  </code></pre>
  
  <p>Typescript compiler tells that map does not exists because it is not a part of Observable</p>
  
  <p>I also tried this</p>
  
  <pre><code>import { Response } from "@angular/http";
  
  this.http.post(url).post((resp: Response) =&gt; resp)
  </code></pre>
  
  <p>It compiles, but I get a unsupported Media Type response.
  These solutions should work for "Http" but it does not on "HttpClient".</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>I get also a unsupported media type with the @Supamiu solution, so it would be an error on my headers. So the second solution from above (with Response type) should works too. But personnaly, I don't think it is a good way to mix "Http" with "HttpClient" so I will keep the solution of Supamiu</p>