title: Angular2 mapping object properties
body: <p>Apologies for this probably super confusing title, I don't know if its exactly accurate with what I am trying to do.</p>
  
  <p>I have a component that is assigning objects of data to variables so that they can be <code>typecast</code>. I have interfaces created for this purpose:</p>
  
  <pre><code>export interface Role {
      RoleID: number;
      RoleName: string;
  }
  
  export interface Language {
      LanguageID: number;
      LanguageName: string;
  }
  
  
  ...
  
  roles: Role[] = [];
  languages: Language[] = [];
  </code></pre>
  
  <p>I am using an npm module called <a href="https://roolebo.github.io/ng2-select-compat/" rel="nofollow noreferrer">ng-select</a> which adds some extended functionality to select inputs.</p>
  
  <p>My HTML is set up like so:</p>
  
  <pre><code>&lt;ng-select 
   [allowClear]="true"
   [items]="roles"
   placeholder="No role selected"&gt;
  &lt;/ng-select&gt;
  </code></pre>
  
  <p>All of my select inputs use an ID (value) and Label (text). This is great because the module allows for that.</p>
  
  <blockquote>
    <p>Array of items from which to select. Should be an array of objects with id and text properties.</p>
  </blockquote>
  
  <p>My question is as follows: The object that this module is wanting is needed the property names to be <code>id</code> and <code>text</code>. Since I am typing my inputs to the interface though, I am unable to rename them in there.</p>
  
  <p>Are there any suggestions on how I can map this data in a way where I can provide the module my object and say that <code>RoleID = id</code> and <code>RoleName = text</code> for example.</p>
  
  <p>In short, my current object of:</p>
  
  <pre><code>{
      RoleID: 123,
      RoleName: 'Admin'
  
  }
  </code></pre>
  
  <p>Needs to be:</p>
  
  <pre><code>{
      id: 123,
      text: 'Admin'
  
  }
  </code></pre>