title: Angular: Mapping HTTP response with new http client
body: <p>I have a generic API service in my app that makes requests like this to the backend:</p>
  
  <pre><code>post&lt;T&gt;(url: string, jsonObject: object): Observable&lt;T&gt; {
  
      return this.http.post&lt;T&gt;(url, JSON.stringify(jsonObject));
  
  }
  </code></pre>
  
  <p>I use that method like this from my components and try to cast the response as a specific model:</p>
  
  <pre><code>this.apiService.post&lt;SomeSpecificModel&gt;('some/path/here', this.usernameForm.value)
                                          .subscribe(
                                              res =&gt; {
                                                  console.warn(res);
                                              },
                                              () =&gt; {
                                                  console.warn("error");
                                              }
                                          );
  </code></pre>
  
  <p>My problem is that the API returns content like this:</p>
  
  <pre><code>{
      code: some-string,
      type: some-number,
      data: []
  }
  </code></pre>
  
  <p>And the <code>data</code> property is where the entity is that I want to cast with my model in Angular. </p>
  
  <p>I would still like to have access to both <code>code</code> and <code>data</code> properties in my component, but I am not sure how to accomplish that. </p>
  
  <p>Can I make a base model that mimics the response from the API and has a generic array property? Something like this:</p>
  
  <pre><code>export class BaseModel&lt;T&gt; {
      code: string;
      type: number;
      data: Array&lt;T&gt;;
  }
  </code></pre>
  
  <p>And then cast like this?</p>
  
  <pre><code>this.apiService.post&lt;BaseModel&lt;SomeSpecificModel&gt;&gt;(...
  </code></pre>
  
  <p>I tried that and I don't get any build errors, but the properties on <code>SomeSpecificModel</code> is not mapped. </p>