In this example, I am gonna show you that how we can read complex JSON object using angular, I also use [ngSyle] to decorate our HTML table.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ngstyleex',
  template: `
  
    <p>Read Array of Object </p>
<div>

<h1>{{ myarray.name }}</h1>
<h2>{{ myarray.age }}</h2>
<table [ngStyle]="{'border': bordermy}">
<tr [ngStyle]="{'border': bordermy}" *ngFor="let n of myarray.cars">
<td>
{{ n.name }}
</td>
<td>
<table [ngStyle]="{'border': bordermy}">
<tr [ngStyle]="{'border': bordermy}" *ngFor="let m of n.models">
<td>{{ m }}</td>
</tr>
</table>
</td>


</tr>





</table>

</div>



  `,
  styles: []
})
export class NgstyleexComponent implements OnInit {

  mycolor: string;
  bordermy: string;
  myarray;
  constructor() { 

    this.bordermy = '2px solid red';
    this.mycolor = 'red';
    this.myarray =  {
      "name":"John",
      "age":30,
      "cars": [
          { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
          { "name":"BMW", "models":[ "320", "X3", "X5" ] },
          { "name":"Fiat", "models":[ "500", "Panda" ] }
      ]
   }
  }

  ngOnInit() {
  }

}

Output: