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

Question

I have an array from 1 until 35:

numbersArray = [1,2,3,4,....,35]

I want to create a html table like the following:

---------------------------
1  |2  |3  |4  |5  |6  |7
---------------------------
8  |9  |10 |11 |12 |13 |14
---------------------------
15 |16 |17 |18 |19 |20 |21
---------------------------
22 |23 |24 |25 |26 |27 |28
---------------------------
29 |30 |31 |32 |33 |34 |35
---------------------------

I used the following:

<tr *ngFor="let number of numbersArray;">
    <td>{{number}}</td>
</tr>

How can I add </td></tr><tr><td> tags after 6 items in *ngFor?

Answer 1

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>