title: Looping over an array and displaying in dropdown - Angular
body: <p>So - I have a set of data like so: </p>
  
  <pre><code>people = [
      {
        name: "Bob",
        age: "27",
        occupation: "Painter"
      },
      {
        name: "Barry",
        age: "35",
        occupation: "Shop Assistant"
      },
      {
        name: "Marvin",
        age: "42",
        occupation: "Mechanic"
      },
      {
        name: "Arthur dent",
        age: "27",
        occupation: "Human"
      },
  </code></pre>
  
  <p>I then also have a drop down in my html like so - </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;select id='peeps' name='people'&gt;
      &lt;option&gt;&lt;/option&gt;    
  &lt;/select&gt;
  
  &lt;div class='show-info'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is all in one component and what I am trying to do is loop over the people array, populate the options with their names and when you select that person in the drop down, their information gets displayed in the div. I have tried to start this off but I am running into a few issues. </p>
  
  <p>I started doing this - </p>
  
  <pre class="lang-js prettyprint-override"><code>peepsSelect = document.getElementById("peeps") as HTMLElement;
  populationDropdown() {
    for(var i = 0; i &lt; this.people.length; i++) {
      var option = document.createElement("option");
      option.text = this.people[i].name;
      option.value = this.people[i].name;
      option.value = this.people[i].age;
      option.value = this.people[i].occupation;
      this.peepsSelect.add(option);
   } 
  }
  </code></pre>
  
  <p>However I was getting error messages such as 'add does not exist on type htmlelement.</p>