Max number per row with ngfor - css

Question

Is it possible to create new row in 'td' after ngFor reaches 10 image repeats, now pics are shown all in one td and shrinking as it gets more and more?
<td *ngFor="let row of pics">
<div class="checkbox">
<label><input type="checkbox" [checked]="row.checked" value="{{row.url}}" (change)="addpic($event.target.checked, row.id)"></label>
</div>
<img src="{{picroute}}{{row.img}}>
</td>

Answer 1

<tr *ngFor="let page of [0,1,2,3,4,5,6,7,8,9,10,11,12].slice(0,pics/10)">
<td *ngFor="let row of pics.slice(page*10,(page+1)*10">
<div class="checkbox">
<label><input type="checkbox" [checked]="row.checked"
value="{{row.url}}" (change)="addpic($event.target.checked, row.id)">
</label>
</div>
<img src="{{picroute}}{{row.img}}>
</td>
</tr>

Answer 2

I think flex-box could be more useful, you can control the shrink ratio if you need, the most important, only an one dimension array is needed.

Answer 3

<td>
<tr ng-repeat="row in arrange(pics, 10)">
<td ng-repeat="pic in row">
<div class="checkbox">
<label>
<input type="checkbox"
[checked]="row.checked"
value="{{row.url}}"
(change)="addpic($event.target.checked, row.id)">
</label>
</div>
<img src="{{pic}}"
</td>
</tr>
</td>
arrange(pics, numberPerRow) {
var arrangedArray = [];
while (pics.length > numberPerRow) {
arrangedArray.push(arrangedArray.splice(0, numberPerRow));
}
arrangedArray.push(pics);
return arrangedArray;
}
This is a somewhat elegant solution imo, just replace variables accordingly.