Vertical table with dynamic data - html

Question

Seems to be the same requirement like AngularJS "Vertical" ng-repeat but solution doesn't work for *ngFor
I have this object array that I am trying to bind to an HTML table. Its format is something like below:
[
{
"Animal":"Dog",
"Country":"France",
"Food":"Tofu",
"Car":"Nano",
"Language":"TypeScript"
}
]
Now this can simply be formatted in the default HTML horizontal table way like this:
<table>
<tr>
<th>Animal</th>
<th>Country</th>
<th>Food</th>
<th>Car</th>
<th>Language</th>
</tr>
<tr *ngFor="let data of datas">
<td>{{data.Animal}}</td>
<td>{{data.Country}}</td>
<td>{{data.Food}}</td>
<td>{{data.Car}}</td>
<td>{{data.Language}}</td>
</tr>
</table>
This would create table like below(Please ignore the data in the table;its just to give an idea.):
But how would I create a structure like this with dynamic data(kind of a vertical table):

Answer 1

In Component:
this.arrayOfKeys = Object.keys(this.datas[0]);
html:
<table>
<tr *ngFor="let key of arrayOfKeys">
<th>{{key}}</th>
<td *ngFor="let data of datas">
{{data[key]}}
</td>
</tr>
</table>

Answer 2

Use ng-container if You have data structure similar to groups[].items[].name
So, if You want to add row
<table>
<ng-container *ngFor="let group of groups">
<tr>
<td>{{group.name}}</td>
</tr>
<tr *ngFor="let item of group.items">
<td>{{item.name}}</td>
</tr>
</ng-container>
</table>
Source: https://stackoverflow.com/a/44086855/1840185