Table row does not split in columns when used from different component

Question

How can I split my table row elements between columns when I use table row from different component. All the row goes to 'First Name' <th> column

client-list.html

<table mdbTable>
    <thead class="black white-text">
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Phone number</th>
        <th>Procedure</th>
        <th>Doctor</th>
        <th>Registration</th>
        <th>Registration</th>
        <th>Edit</th>
        <th>Serve</th>
      </tr>
    </thead>
     <tbody>
      <div *ngFor="let c of clients">
      <tr *ngIf="!c.isAlreadyServed" client-list-item  [client]="c"></tr>
      </div>
    </tbody>
  </table>

client-list-item.html

  <td>{{client.firstName}}</td>
  <td>{{client.lastName}}</td>
  <td>{{client.phone}}</td>
  <td>{{client.procedure}}</td>
  <td>{{client.doctorsName}}</td>
  <td>{{client.registrationDate | date: 'medium'}}</td>
  <td><a href="">Edit</a></td>
  <td><a href="">Serve</a></td>

client-list-item.ts

@Component({
  selector: '[client-list-item]',
  templateUrl: './client-list-item.component.html',
  styleUrls: ['./client-list-item.component.css']
})
export class ClientListItemComponent {
  @Input() client: Client;
}

Answer 1

Replacing the div with a ng-container should do the trick. ng-container element does not make it to the final rendered DOM and is used for having structural directives without polluting the DOM.

<ng-container *ngFor="let client of clients">
    <tr *ngIf="!c.isAlreadyServed" client-list-item  [client]="c"></tr>
</ng-container>