title: Angular extend API model for component purpose
body: <p>I often have needs to extend my API model with parameters I use just in component view.</p>
  
  <p>For Example I have a model:</p>
  
  <pre><code>export class Person {
    name: string;
    surname: string;
    address: string;
  }
  </code></pre>
  
  <p>It is something I get from API:</p>
  
  <pre><code>getPersons(): Observable&lt;Person[]&gt; {
    return this.httpClient.get&lt;Person[]&gt;`${environment.API}/person`);
  }
  </code></pre>
  
  <p>When I get this in my component I often need to extend model with parameter/attribute I get in data processing after request or just simple 'active'/'select' parameter for UI visualization tracking.</p>
  
  <p>Which approach to use for this purpose. I know for 2 solutions:</p>
  
  <p>1) Add parameter to the class model even if that parameter do not participate in server response, just separate them from standard parameters:</p>
  
  <pre><code>export class Person {
    name: string;
    surname: string;
    address: string;
  
    ui_active: boolean;   // I know that those parameters are not from API        
    ui_fullName: string;  // response but they are here to make my life easier
  }
  </code></pre>
  
  <p>2) Make another extend class with those parameters:</p>
  
  <pre><code>export class PersonExtended extends Person  {
    ui_active: boolean;       
    ui_fullName: string
  }
  </code></pre>
  
  <p>But this approach complicate thing since I have 2 models, and I need to switch between to them all the time.</p>
  
  <p>What is the best practice for this kind of situation ?</p>