In my parent component's template, I have inserted a table with each row being a child component that loops through *ngFor.
Parent template :
<table style="width:100%">
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<app-liste-client-row *ngFor="let cli of clients" [client]="cli" >
</app-liste-client-row>
</table>
Template for the child component:
<tr>
<td>{{client.id}}</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
</tr>
The advantage is that all the rows of the table are displayed.
The drawback is that the data in the rows do not align perfectly with the columns of the table. I tried using CSS (using IDs with margin and padding), but it doesn't seem like an ideal solution as I had to adjust the values manually. Also, I don't want to directly code the loop into my parent component either.
What is the best and most efficient way to create a clean table structure using parent and child components? Am I missing something in terms of utilizing CSS effectively?