How to insert dropdown into dynamic table in angular7 - angular6

Question

Tried to insert dropdown inside dynamic table but i do not know how to do it.I want to insert dropdown with some values on last column.Please help anyone to find the solution.
head = [ "Name", "Age", "Gender","Action"];
details = [
{ "name": "star1", "age": "25", "gender": "male","action": "" },
{ "name": "star2", "age": "22", "gender": "female","action": "" },
{ "name": "star3", "age": "21", "gender": "male","action": "" },
{ "name": "star4", "age": "35", "gender": "female","action": "" },
];
constructor(){
this.tableHead = this.head;
this.userDetails = this.details;
}
Demo:https://stackblitz.com/edit/angular-bfs3gp?file=src/app/app.component.ts

Answer 1

I have made a solution for you. Can you please replace your details array to
details = [
{ name: "star1", age: "25", gender: "male", action: ["Edit", "Delete"] },
{ name: "star2", age: "22", gender: "female", action: ["Edit", "Delete"] },
{ name: "star3", age: "21", gender: "male", action: ["Edit", "Delete"] },
{ name: "star4", age: "35", gender: "female", action: ["Edit", "Delete"] }
];
Then Replace the dynamic-table.component.html to below code
<table>
<thead>
<tr class="table-head">
<th *ngFor="let tableHead of tableHeads">{{tableHead}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let tableData of tableDatas">
<td *ngFor="let colName of tableColNameGenerated"> {{colName != 'action' ? tableData[colName] : ''}}
<span *ngIf="colName == 'action'">
<select>
<option *ngFor="let opt of tableData.action">{{opt}}</option>
</select>
</span>
</td>
</tr>
</tbody>
</table>
Now I hope your concern is resolved.
Hope this helps!
Thank you.