@Eve has provided a solution to this problem using CSS techniques.
For those interested in manually manipulating the data, here is a step-by-step guide:
export class MembersComponent {
// Data values
team: Array<string> = ['X', 'Y', 'Z'];
// Set number of desired rows
rows: number = 2;
// Calculate columns based on data length and specified row count
columns: number = Math.ceil(this.team.length / this.rows);
// Store transformed data here
information: any = [];
constructor() {
// Counter for tracking data
let index = 0;
// Outer loop
for (let k = 0; k < this.columns; ++k) {
// Create a new row within data array
this.information.push([]);
// Inner Loop
for (let l = 0; l < this.rows; ++l) {
// Avoid adding undefined elements
if (this.team[index]) {
this.information[k][j] = this.team[index];
}
// Update counter
index++;
}
}
// Transpose the data for proper display
this.information = this.transpose(this.information);
console.log(this.information);
}
// Source: https://stackoverflow.com/questions/17428587/transposing-a-2d-array-in-javascript
transpose(array: any) {
return array[0].map((col: any, i: any) =>
array.map((row: any) => row[i])
);
}
}
With the data now organized into a 2D format with correct rows and columns, you can render it in your HTML as shown below:
<table class="table">
<tr *ngFor="let line of information">
<span *ngFor="let col of line">
<td *ngIf="col">{{ col }}</td>
</span>
</tr>
</table>
You have the flexibility to adjust the order in which elements appear within each row by modifying the loops in the code. Additionally, feel free to experiment with varying row counts and dataset sizes for further testing.
See a demo here https://stackblitz.com/edit/angular-cre8iv?file=src%2Fmembers%2Fmembers.component.ts