title: Angular dropdown switching from hard coded data to live data from service
body: <p>I have a Angular 5 dropdown that works fine with hard coded data, but I need to switch it to live data.  The problem is that the live data is plain array.</p>
  
  <p>This is what currently works </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select...
    &lt;option *ngFor="let activityType of activityTypes" [ngValue]="activityType.Id"&gt;
          {{activityType.Activity}}
    &lt;/option&gt;
  </code></pre>
  
  <p><strong>Typescript Component</strong></p>
  
  <pre><code>activityTypes: any[];
  
  this.activityTypes = [
          { Id: 1, Activity: "Select One" },
          { Id: 2, Activity: "Insert" },
          { Id: 2, Activity: "Update" },
          { Id: 3, Activity: "Delete" },          
  ];
  </code></pre>
  
  <p>However, here is my issue, I'm pulling down data from a service and the data looks like this array</p>
  
  <pre><code>this.activityTypes v["INSERT", "UPDATE"]
                        0: "INSERT"
                        1: "UPDATE"
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/xS2si.png" rel="nofollow noreferrer">click to see dev tool image output</a></p>
  
  <p><strong>Now, how do I use the array to bind to the dropdown?</strong>
  Clearly I would want to have values set as "0", "1" of the array .. then the DISPLAY ( which is my Activity in the hard coded example)  I would want it to hold "INSERT" and "UPDATE"  ...</p>