Vertical table with dynamic data

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>