How to create a table rows with an array in angular?

If it has to be a table and grouped into row you should make the data represent it like so.

Here's a Plunker

data

let cells = [];
for(var i =1; i <= 40 ; i++){
   cells.push(i);
   if((i % 7) == 0) {
      this.rows.push(cells);
      cells = [];
   }
}

table

  <table>
     <tr *ngFor="let cells of rows;">
        <td *ngFor="let c of cells;">{{c}}</td>
     </tr>
  </table>

You can either prepare data for that or create custom pipe like:

@Pipe({ name: 'chunks' })
export class ChunksPipe implements PipeTransform {
  transform(arr: any, chunkSize: number) {
    return arr.reduce((prev, cur, i) => (i % chunkSize) ? prev : prev.concat([arr.slice(i, i + chunkSize)]), []);
  }
}

and then use it the following way:

<tr *ngFor="let chunk of numbersArray | chunks: 7">
  <td *ngFor="let number of chunk">{{number}}</td>
</tr>

Plunker Example

Without any preparations and pipes you can do the following in a generic way:

<table *ngIf="{ colNum: 7 } as ctx">
  <tr *ngFor="let _ of [].constructor(+(arr.length/ctx.colNum).toFixed()), let row = index">
    <td *ngFor="let _ of [].constructor(ctx.colNum), let col = index">
      <div>{{arr[row * ctx.colNum + col]}}</div>
    </td>
  </tr>
</table>

Replace 7 with your desired number of columns.

Ng-run Example

Reduce your array into rows of item:

  numbersArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21];
  rowsArray = [];

  ...

   this.rowsArray =
      this.numbersArray.reduce((memo, item) => {
        let itemsPerRow = 7;
        if (!memo.length) { return memo = [...memo, [item]]; }

        let lastItem = memo[memo.length-1];

        if (lastItem.length < itemsPerRow) {
          memo[memo.length-1] = [...lastItem, item];
        } else {
          memo = [...memo, [item]];
        }

        return memo;
      }, []);

html:

<table>
  <tr *ngFor="let row of rowsArray">
    <td *ngFor="let item of row">
      {{ item }}
    </td>
  </tr>
</table>