I am looking to create a custom table using Angular 2.
Here is the desired layout of the table:
https://i.sstatic.net/6Mrtf.png
I have a Component that provides me with data
export class ResultsComponent implements OnInit {
public items: any;
ngOnInit() {
this.items = ['app1', 'item1', 'item2', 'item3', 'app2', 'item4',
'item5', 'item6', 'app3', 'item7', 'item8', 'item9'];
this.buildArr(this.items);
}
buildArr(theArr: any[]) {
const arrOfarr = [];
for (let i = 0; i < theArr.length ; i += 4) {
const row = [];
for (let j = 0; j < 4; j++) {
const value = theArr[i + j];
if (!value) {
break;
}
row.push(value);
}
arrOfarr.push(row);
}
return arrOfarr;
}
Below is the Template I am currently using
<h1>Results</h1>
<table class="table" id="myTable" class="table">
<thead>
<tr>
<th></th>
<th>Part 1</th>
<th>Part 2</th>
<th>Part 3</th>
<th>Part 4</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of buildArr(items);let i = index">
<td *ngFor="let item of row">{{item}}</td>
</tr>
</tbody>
</table>
However, here is the output I am seeing
https://i.sstatic.net/12kCL.png
How can I achieve the desired table layout? And also, how do I populate a cell in the table with the message "Doesn't exist!"?