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? -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscr...@googlegroups.com. To post to this group, send email to angular@googlegroups.com. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
