Dynamic rowspan in angular

You can do it like shown below

<table>        
    <ng-container *ngFor="let data of dataList">    
        <tr>
            <td [attr.rowspan]="data.numbers.length">{{data.pname}}</td>
            <td>{{data.numbers[0]}}</td>
        </tr>
        <ng-container *ngFor="let number of data.numbers; let i= index;">
            <tr *ngIf="i!=0">
                <td>{{number}}</td>
            </tr>
        </ng-container>
    </ng-container>
</table>

But datalist must be of the following format i.e. numbers must be an array

dataList = [
 {
  pname: "abc",
  numbers: [123, 234]
 },
{
  pname: "mno",
  numbers: [125,  237]
 }
]

it is simple to use two *ngFor and avoid repeat Code by data.numbers[0].

<table>        
  <ng-container *ngFor="let data of dataList">    
   <ng-container *ngFor="let number of data.numbers; let i= index;">
     <tr>
        <td *ngIf="i==0" [attr.rowspan]="data.numbers.length">{{data.pname}}</td>
        <td>{{number}}</td>
     </tr>
   </ng-container>
  </ng-container>
</table>

Simple.

You don't need index and nested ng-container.

<table>
    <ng-container *ngFor="let data of dataList">
        <tr>
            <td [attr.rowspan]="data.numbers.length + 1">{{data.pname}}</td>
        </tr>
        <tr *ngFor="let number of data.numbers;">
          <td>{{number}}</td>
        </tr>
    </ng-container>
</table>

Working example. https://stackblitz.com/edit/angular-yrose8?file=src%2Fapp%2Fapp.component.html

Tags:

Html

Angular