CODEWITHSUNDEEP
javascripthtmlangular
Alex
Alex

Reputation: 1158

Multiple table rows as single component

What would be a way to have multiple table rows in a single Angular component ? I would like to display two rows per item of a given list, and have it in an HTML table.

I tried using ng-template with a component as attribute to avoid having a component tag breaking the table flow, but the input won't work in that case. Ideally I'm looking for a way to remove the component tag from the dom...

<table>
  <thead>
    <th>Name</th><th>City</th>
  </thead>
  <tbody>
    <ng-container app-located-person
                  *ngFor="let person of persons"
                  [person]="person">
    </ng-container>
  </tbody>
</table>

App located person

<tr>
  <td>{{ person.name }}</td>
  <td>{{ person.city }}</td>
</tr>
<tr *ngIf="details">
  <td>Last connection</td>
  <td>{{ person.lastConnection }}</td>
</tr>

Upvotes: 1

Views: 1664

Answers (3)

Alex
Alex

Reputation: 1158

I finally made it not to break the table dom flow by using display: table-row-group; on the component node :)

Upvotes: 4

Bruno Farias
Bruno Farias

Reputation: 903

Try the following:

<table>
  <thead>
    <th>Name</th><th>City</th>
  </thead>
  <tbody>    
    <ng-container *ngFor="let person of persons">
      <tr>
        <td>{{person.name}}</td>
        <td>{{person.city}}</td>
      </tr>
      <tr *ngIf="person.lastConnection">
        <td>Last connection</td>
        <td>{{person.lastConnection}}</td>
      </tr>      
    </ng-container>
  </tbody>
</table>

Stackblitz: Link

Upvotes: 0

Matt Walterspieler
Matt Walterspieler

Reputation: 2171

Why don't you include the tr's inside the ng-container tag?

<table>
  <thead>
    <th>Name</th><th>City</th>
  </thead>
  <tbody>
    <ng-container 
     *ngFor="let person of persons"
     [person]="person">
       <tr>
         <td>{{ person.name }}</td>
         <td>{{ person.city }}</td>
       </tr>
       <tr *ngIf="details">
         <td>Last connection</td>
         <td>{{ person.lastConnection }}</td>
       </tr>
    </ng-container>
  </tbody>
</table>

If you want to use a component:

<table>
  <thead>
    <th>Name</th><th>City</th>
  </thead>
  <tbody>
    <ng-container 
     *ngFor="let person of persons">
       <app-located-person [person]="person"></app-located-person>
    </ng-container>
  </tbody>
</table>

Upvotes: 0

Related Questions