How to create dynamic HTML table row with elements in it

Question

In my angular application, I have an array of numbers like below. I want to loop thru this array and display these value 20 in each TR , so that numbers doesn't truncate and end with comma in each row in HTML table. How can we achieve this.

let arr = [20001,20002,20003,20004,20005,20006,20007,20008,20009,200010,200011,200012,20011,20012,20013,20014,20015,20016,20017,20018,20019, 200110,200111,200112,20021,20022,20023,20024,20025,20026,20027,20028,20029,200210,200211,200212,20031,20032,20033,20034,20035, 20036,20037,20038,20039,200310,200311,200312,20041,20042,20043,20044,20045,20046,20047,20048,20049,200410,200411,200412,20051, 20052,20053,20054,20055,20056,20057,20058,20059,200510,200511,200512,20061,20062,20063,20064,20065,20066,20067,20068,20069]

please check answers https://stackoverflow.com/questions/43926470/how-to-add-rows-dynamically-in-a-html-table — Kuldeep Raj, Mar 26 '23 at 00:32

score 0 · Answer 1 · answered Mar 26 '23 at 00:24

you need to create an array of arrays each subarray contains 20 numbers

let tableArr = [];
for (let i = 0; i < arr.length; i += 20) {
  tableArr.push(arr.slice(i, i + 20));
}

in html :

<table>
  <tr *ngFor="let row of tableArr">
    <ng-container *ngFor="let num of row">
      <td>{{ num }}</td>
    </ng-container>
  </tr>
</table>

How to create dynamic HTML table row with elements in it

1 Answers1