Angular *ngFor to generate table 4 cells wide - html

Question

I have an array in a component file that will by dynamically updated based on a database query. I need this array to be populating the contents of a table like this:
For an array of 7 items:
---------------------------------------------
| array[0] | array[1] | array[2] | array[3] |
---------------------------------------------
| array[4] | array[5] | array[6] |
----------------------------------
I have this method so far:
HTML:
<table>
<ng-container *ngFor="let employer of businessAdmins">
<tr>
<div class="card shadow m-2" style="height:25vh;width:18.75vh;border-radius:5%;overflow:hidden;">
<div class="ml-1"><div style="font-weight:bold">Name: </div>{{employer.data().first_name + " " + employer.data().last_name}}</div>
</div>
</tr>
</ng-container>
</table>
This works fine in producing a list of cells however I do not know how to populate them horizontally until there are 4 horizontal cells and then move on to the next line.

Answer 1

It is very simple with CSS flex box. Try this code -
HTML
<div class="table">
<ng-container *ngFor="let employer of businessAdmins">
<div class="card shadow">
<div style="font-weight:bold">
Name: {{employer.data().first_name + " " + employer.data().last_name}}
</div>
</div>
</ng-container>
</div>
CSS
.table {
display: flex;
flex-wrap: wrap;
width: 100%;
.card {
flex: 1 0 25%;
}
}
Result-

Answer 2

You can do something like this (manually) as I was not able to find the "step" in *ngFor so far (I've simplified your employer as simple string).
I don't like it as it's not using any advantage of the framework and we are scanning the list/array even if we don't need every element (performance issue).
<table>
<ng-container *ngFor="let employer of businessAdmins; let i = index">
<tr *ngIf="i % 4 == 0">
<td> {{ businessAdmins[i] }} </td>
<td *ngIf="businessAdmins[i+1]"> {{ businessAdmins[i+1] }} </td>
<td *ngIf="businessAdmins[i+2]"> {{ businessAdmins[i+2] }} </td>
<td *ngIf="businessAdmins[i+3]"> {{ businessAdmins[i+3] }} </td>
</tr>
</ng-container>
</table>

Answer 3

You can acheive it with flex box.
flexbox
td {
width: 20%;
background-color: aqua;
border: 1px solid black;
}
tr {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
}
table {
width: 40vw;
margin: 30px
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>