How to show the dynamic table with dropdown in angular and how to push each row to another div

Question

Here I am getting below as dynamic data

[
    { 
        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']
    }
];

And here I can display this dynamic data in table using angular 2 *ngFor but here the problem I'm facing is :

1. 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.

2. 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

Below is my html code :

<table class="table" *ngFor=let data of Table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>job</th>
            <th>year_joined</th>
            <th>missions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{data.id}}</td>
            <td>{{data.name}}</td>
            <td>{{data.job}}</td>
            <td>{{data.year_joined}}</td>
        </tr>
    </tbody>
</table>

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 & select all of them and push it to another div

Answer 1

You can iterate on the Table array and can build your first table. *ngFor structural directive should be on the <tr> instead of the table.

Also I have attached a click handler, this will get fired once you will click on the tr.

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Job</th>
            <th>Year Joined</th>
            <th>Mission</th>
    </thead>

    <tr *ngFor="let data of Table;let i = index" (click)=addToAnotherTable(i)>

        <td>
            <span>{{data.name}}</span>
        </td>
        <td>
            <span>{{data.job}}</span>
        </td>
        <td>
            <span>{{data.year_joined}}</span>
        </td>
        <td>
          <select>
             <option *ngFor="let mission of data.missions">
                {{mission}}
             </option>
          </select>
        </td>
    </tr>
</table>

As you must be seeing your table now. When you will click on any row, addToAnotherTable(i) will get fired, which will push the index of the clicked row in some array.

addToAnotherTable(ind){
  this.secondaryTable.push(ind);
}

Now this array will be the array we will be using to build another table.

    <tr *ngFor="let data of secondaryTable">
        <td>
            <span>{{Table[data].name}}</span>
        </td>
        <td>
            <span>{{Table[data].job}}</span>
        </td>
        <td>
            <span>{{Table[data].year_joined}}</span>
        </td>
        <td>
          <select>
            <option *ngFor="let mission of Table[data].missions">
             {{mission}}
            </option>
          </select>
        </td>
    </tr>

will make another table. As it is looping over the values of secondaryTable.

You might want to modify the functionality of addToAnotherTable based on your need. Like if you want to toggle the rows in table 2 on click of row in table 1 then you might use this function

addToAnotherTable(ind) {
    var index = this.secondaryTable.indexOf(ind);
    if (index > -1) {
      this.secondaryTable.splice(index, 1);
    }
    else{
      this.secondaryTable.push(ind);
    }
  }

or you might want to add sorting on the data and so on...

See this live on stackblitz: https://stackblitz.com/edit/angular-w2m94j

Answer 2

You can try similar to this.

<table class="table">
<thead>
    <tr>
        <th>Name</th>
        <th>Job</th>
        <th>Year Joined</th>
        <th>Mission</th>
</thead>

<tr *ngFor="let data of Table;let i = index">

    <td>
        <span>{{data.name}}</span>
    </td>
<td>
        <span>{{data.job}}</span>
    </td>

<td>
        <span>{{data.year}}</span>
    </td>
    <td>
  <option *ngFor="let mission of data.mission" 
   [selected]="mission.name == 'back'">{{mission.name}}</option>
    </td>
</tr>

Working sample