How to use ngFor in td tag?

  • Thread starter Mahadev Bhairava
  • Start date
M

Mahadev Bhairava

Guest
I am looping in td using ngFor but for every data it creates new cell. How to display all data in one column seperated by comma.

Here is my html file :-

<div>
<table border="1">
<tr>
<th>Actions</th>
<th>FirstName</th>
<th>LastName</th>
<th>Age</th>
<th>Salary</th>
<th>Gender</th>
<th>Email</th>
<th>Department</th>
<th>State</th>
<th>City</th>
<th>SkillSet</th>
<th>Address</th>
</tr>
<tr *ngFor = "let employee of employees">
<td>Edit | Delete</td>
<td>{{employee.firstName}}</td>
<td>{{employee.lastName}}</td>
<td>{{employee.age}}</td>
<td>{{employee.salary}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.email}}</td>
<td>{{employee.department}}</td>
<td>{{employee.state}}</td>
<td>{{employee.city}}</td>
<ng-container *ngFor="let skill of employee.skills" >
<td> {{skill.skillName}} </td>
</ng-container>
<td>{{employee.address}}</td>
</tr>
</table>
</div>


I am getting output like this :-

SkillSet | Address | |
---------|---------|----------|------
JAVA | SQL | Varanasi |
JAVA | SQL | J2EE | BTM
JAVA | Ranchi | |


I want output like this :-

SkillSet | Address |
-----------------|---------|
JAVA, SQL | Varanasi|
JAVA, SQL, J2EE | BTM |
JAVA | Ranchi |

Continue reading...
 
Top