Display data by row (limited by 3) Angular-CodePudding

I'm new with programing.

I want to try to show element by row using angular and limited by 3 elements each row. (Using *ngFor)

For example, like this image

CodePudding user response：

In such grid cases, you need 2 loops. Here are two examples in form of table (vertical and horizontal directions)

<table>
  <tbody>
    <tr *ngFor="let row of items | slice:0:ceil(items.length/numberOfCols); let i=index;">
      <td *ngFor="let col of items | slice:0:numberOfCols; let j=index;">
        {{ items[ i*numberOfCols   j ] }}
      </td>
    </tr>
  </tbody>
</table>
<hr>
<table>
  <tbody>
    <tr *ngFor="let row of items | slice:0:ceil(items.length/numberOfCols); let i=index;">
      <td *ngFor="let col of items | slice:0:numberOfCols; let j=index;">
        {{ items[ j*ceil(items.length/numberOfCols)   i ] }}
      </td>
    </tr>
  </tbody>
</table>

ts:

items = ['1', '2', '3', '4', '5', '6', '7', '8'];
numberOfCols = 3;
ceil(x: number) {
    return Math.ceil(x);
}

if you using bootstrap or any other grid system (row - col), table can be replaced with div elements...