title: How to access the response headers using HttpClient?
body: <p>I'm trying to get the X-Total-Count value from a get request.</p>
  
  <p>In my meal.service.ts I use this function to call the service.</p>
  
  <pre><code>import { Injectable }              from '@angular/core';
  import { Observable }              from 'rxjs/Observable';
  import { catchError, map, tap }    from 'rxjs/operators';
  import { of }                      from 'rxjs/observable/of';
  import { HttpClient, HttpHeaders,
           HttpParams,
           HttpResponse }            from '@angular/common/http';
  
  getMeals (page:number): Observable&lt;Meal[]&gt; {
      let httpParams = new HttpParams().set('where', '%')
        .set('orderBy', 'meal_name')
        .set('page', page.toString())
        .set('items', '10');
      return this.http.get&lt;Meal[]&gt;(this.mealUrl, { params: httpParams  })
        .pipe(
          tap(meals =&gt; { this.log(`fetched entries`); console.log(meals.headers)  }),
  // meals.headers is undefined
          catchError(this.handleError&lt;Meal[]&gt;('getMeals'))
        );
    };
  </code></pre>
  
  <p>I get the error:</p>
  
  <blockquote>
    <p>ERROR in src/app/meal.service.ts(52,71): error TS2339: Property 'headers' does not exist on type 'Meal[]'.</p>
  </blockquote>
  
  <p>In <em>this.meals</em> I see only the datasets from typ <em>Meal</em> but no headers.</p>
  
  <p>In my meals.component.ts I'm using this service:</p>
  
  <pre><code>  getMeals(page:number): void {
      this.mealService.getMeals(this.page)
        .subscribe(data =&gt; {
          this.count = data.headers.get('X-Total-Count'), // didn't work
          this.meals = data
        })
    }
  </code></pre>
  
  <p>What's the right method to get the headers from request?</p>
  
  <p>I changed my code to:</p>
  
  <pre><code>  getMeals (page:number): Observable&lt;any&gt; {
      let httpParams = new HttpParams().set('where', '%')
        .set('orderBy', 'meal_name')
        .set('page', page.toString())
        .set('items', '10');
      return this.http.get&lt;any&gt;(this.mealUrl, { params: httpParams, observe: 'response'} )
        .pipe(
          catchError(this.handleError&lt;any&gt;('getMeals'))
        );
    };
  </code></pre>
  
  <p>After that I have a body and headers.</p>