title: How should I modify the response to an HTTP request and easily access it before return it out from Observable?
body: <p>I'm upgrading to Angular to version 5, I was using <code>@angular/http</code> before and now I need to update to <code>@angular/common/http</code> and use <a href="https://angular.io/guide/http" rel="noreferrer"><code>HttpClient</code></a></p>
  <p>I already just make http requests in services (not in components) and that <strong>makes them easy to reuse</strong></p>
  <p>This is what I already have (from deprecated http)</p>
  <pre><code>return this.http.get(url, {headers: this.headers}).map(
        (response: Response) =&gt; {
          const data = response.json();
          // Does something on data.data
          
          // return the modified data:
          return data.data;
        }
      ).catch(
        (error: Response) =&gt; {
          return Observable.throw(error);
        }
      );
  </code></pre>
  <p>Now from what I learned from new <code>HttpClient</code> it's like I can't modify the response and give it to the component method which is subscribing to it.</p>
  <p><strong>how should I modify the response to an HTTP request and easily access it before return it out from Observable?</strong></p>
  <p>I just want the same ability to modify the response which I get from API... Like adding some item to it, or do some more stuff to it before returing it</p>