Импорт данных из файла JSON в таблицу со свернутыми строками в Angular 6

Question

Я начал изучать угловой 6, и я действительно в начале.Мне нужно создать такую ​​таблицу:

В ней должна отображаться информация о компьютерах, связанных с сайтами AD, в разных регионах разных стран.

Файл данныхJSON выглядит так:

 {"countryList":[{"Country":null,"Area":null,"AD_Site_Name":null,"Netbios_Name":null,"UserName":"ABILITY\\gaynullin_mf","ARPProductName":"WinRAR 5.31 (64-разрядная)","FilePath":"C:\\Program Files\\WinRAR\\","InstalledSource":"Other","LastHWScan":"2018-05-26T12:56:41","LastScanDate":"2018-05-26T02:57:25"},
 {"Country":null,"Area":null,"AD_Site_Name":null,"Netbios_Name":null,"UserName":"ABILITY\\ufa_it","ARPProductName":"WinRAR 4.01 (64-разрядная)","FilePath":"C:\\Program Files\\WinRAR\\","InstalledSource":"Other","LastHWScan":"2018-05-24T15:02:41","LastScanDate":"2018-05-24T19:28:05"}]}

Я импортировал данные из файла JSON в простую таблицу, но мне нужно создать свернутые строки.Итак, сначала должен быть список стран, затем пользователь должен щелкнуть по нему, и там будет список областей, затем щелкнуть по области, и будет список веб-сайтов, а затем пользователь выберет веб-сайт и увидит информацию о связанных компьютерах.

Пока мой код выглядит следующим образом:

Файл app.component.html:

     <table>
  <thead>
    <tr>
        <th>Country</th>
        <th>Area</th>
        <th>AD_Site_Name</th>
        <th>Netbios_Name</th>
        <th>UserName</th>
        <th>ARPProductName</th>
        <th>FilePath</th>
        <th>InstalledSource</th>
        <th>LastHWScan</th>
        <th>LastScanDate</th>
    </tr>
  </thead>

  <tbody *ngFor="let country of country">
    <tr>
      <td>{{ country.Country }}</td>
      <td>{{ country.Area }}</td>
      <td>{{ country.AD_Site_Name }}</td>
      <td>{{ country.Netbios_Name }}</td>
      <td>{{ country.UserName }}</td>
      <td>{{ country.ARPProductName }}</td>
      <td>{{ country.FilePath }}</td>
      <td>{{ country.InstalledSource }}</td>
      <td>{{ country.LastHWScan }}</td>
      <td>{{ country.LastScanDate }}</td>
    </tr>
  </tbody>
</table>

Файл app.component.ts:

    import { Component, OnInit } from '@angular/core';
import { HttpService} from './http.service';
import { Country } from './country';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [HttpService]
})

export class AppComponent implements OnInit { 

  country: Country[]=[];
  area: Country[]=[];

  constructor(private httpService: HttpService){}

  ngOnInit(){

      this.httpService.getData().subscribe(data => this.country=data["countryList"]);
  }

}

Файл http.service.ts:

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable()
export class HttpService{

    constructor(private http: HttpClient){ }

    getData(){
        return this.http.get('/assets/data.json')
    }
}

Файл country.ts:

export class Country{
    Country: string;
    Area: string;
    AD_Site_Name: string;
    Netbios_Name: string;
    UserName: string;
    ARPProductName: string;
    FilePath: string;
    InstalledSource: string;
    LastHWScan: string;
    LastScanDate: string;
}

Как создать эти свернутые строки?