rj
I am new to Angular. I want to render each row of a html table as separate component using ngFor. I tried an approach but failed.
StackBlitz link - https://stackblitz.com/edit/angular-yaie9e?file=src%2Fapp%2Fapp.component.html
More Details below -
venues-list will be the parent table component. venue-item will be the component representing each row of a table.
I have implemented both the components with the required data and tried testing them. But i am getting bad results.
HTML snip of venues-list component -
<table class="table table-hover" [mfData]="filteredVenues" #mf="mfDataTable">
<thead>
<tr>
<th>Venue Name</th>
<th>User Name</th>
<th>HeartBeat</th>
</tr>
</thead>
<tbody>
<tr style="cursor: pointer;"
*ngFor="let venue of mf.data | sortgrid: '-lastheartbeat';"
[routerLink]="[venue.venueKey.id]"
routerLinkActive="active">
<app-venue-item></app-venue-item>
</tr>
</tbody>
</table>HTML snip of venue-item component -
<td>
<span>Venue Name comes here</span>
</td>
<td>
<span>User Name comes here</span>
</td>
<td>
<span>HeartBeat comes here</span>
</td>Data in latter HTML's td elements is a sample i tested before i load the actual data.
I believe <app-venue-item> selector will wrap the html of venue-item and will be rendered within venues-list component.
However, when i test this flow i see all the latter HTML's td elements loaded under the first thelement of former HTML.
What am i doing wrong or missing here?
