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