title: How to show the dynamic table with dropdown in angular and how to push each row to another div
body: <p>Here I am getting below as dynamic data</p>
  
  <pre><code>[
      { 
          id: 151, 
          name: 'Alan B. Shepard, Jr.', 
          job: 'Astronaut', 
          year_joined: 1959,
          missions: ['MR-3', 'Apollo 14']
      },
      { 
          id: 152, 
          name: 'Virgil I. Grissom', 
          job: 'Astronaut', 
          year_joined: 1959,
          missions: ['MR-4', 'Apollo 1']
      },
      { 
          id: 153, 
          name: 'John H. Glenn, Jr.', 
          job: 'Astronaut', 
          year_joined: 1959,
          missions: ['MA-6','STS-95']
      },
      { 
          id: 154, 
          name: 'M. Scott Carpenter', 
          job: 'Astronaut', 
          year_joined: 1959,
          missions: ['MA-7']
      }
  ];
  </code></pre>
  
  <p>And here I can display this dynamic data in table using <strong>angular 2</strong> <code>*ngFor</code> but here the problem I'm facing is :</p>
  
  <ol>
  <li><p>How to display the Dropdowns in the dynamic table here in my dynamic data I want to display "missions" field as dropdown so that user can select the dropdown.</p></li>
  <li><p>Presently I am displaying the above dynamic table in divOne .How can I push it to the divTwo I mean another Div which is empty here I want to select the row or which ever row i select i want to send it to the empty div how can perform these actions</p></li>
  </ol>
  
  <p>Below is my html code :</p>
  
  <pre><code>&lt;table class="table" *ngFor=let data of Table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;id&lt;/th&gt;
              &lt;th&gt;name&lt;/th&gt;
              &lt;th&gt;job&lt;/th&gt;
              &lt;th&gt;year_joined&lt;/th&gt;
              &lt;th&gt;missions&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;{{data.id}}&lt;/td&gt;
              &lt;td&gt;{{data.name}}&lt;/td&gt;
              &lt;td&gt;{{data.job}}&lt;/td&gt;
              &lt;td&gt;{{data.year_joined}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Above is my code, here I dynamically getting data except "missions" I don't know how to show dropdown in dynamic table i mean in each row and how to select each row &amp; select all of them and push it to another div</p>