Как преобразовать ответ - массив объектов в древовидную структуру и реализовать в многоуровневом раскрывающемся списке

Question

Я новичок в angular 6. Я хочу преобразовать один ответ, который представляет собой массив объектов, в древовидную структуру и должен реализовать это в многоуровневом раскрывающемся меню пользовательского интерфейса.
Ниже приведен пример кода:

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

export interface ProgramResponseModel{
    parentId : number;
    programId : number;
    programName : string;   
}
export interface ProgramDetailsResponseModel {
    programList : Array<ProgramResponseModel>;
    errorMessage : string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent  {

  public treeChildResultArray:Array<ProgramResponseModel>
  public treeParentResultArray:ProgramResponseModel
    parentNode;
  public programTree: Array<ProgramResponseModel>= 
     [
      {
        parentId: 0,
        programId: 100,
        programName: "Food"
      },
      {
        parentId: 100,
        programId: 101,
        programName: "Fruits",         
      },
      {
        parentId: 100,
        programId: 102,
        programName: "Vegetables"
      },
      {
        parentId: 100,
        programId: 103,
        programName: "Cereals"
      },
      {
        parentId: 101,
        programId: 104,
        programName: "Apple"
      },
      {
        parentId: 101,
        programId: 105,
        programName: "Banana
      },
      {
        parentId: 102,
        programId: 106,
        programName: "Onion"
      },
      {
        parentId: 102,
        programId: 107,
        programName: "Potato"
      },
      {
        parentId: 0,
        programId: 108,
        programName: "Clothes"
      }
    ]



    ngOnInit() {
    this.programTree.forEach((data,index) => {

     const parentId = 0;
     if(data.parentId === parentId){
       console.log("parentId-->"+ parentId)
       const parentNodeId = data.programId;
       console.log("new parentId-->"+parentNodeId)
       console.log(data);
       this.getChild(parentNodeId);
     }

    })

  }



    getChild(parentId){
        console.log(parentId)
        this.programTree.forEach(data => {
          if(data.parentId === parentId){        
            const ChildId = data.programId;        
            console.log(data);
            console.log("childId-->"+ChildId);
            this.getChild(ChildId);
          }
        })
      }

}

Will get the response similar to programTree. I have to get in UI something like below:

Food
    fruits
          apple
          banana
          strawberry
    vegetables
          onion
          potato
clothes

В приведенном выше коде я могу фильтровать по родительскому и дочернему элементам и получать результат в консоли. Но не уверен, как получить sh результат в массиве и получить желаемый результат в html. Подскажите, пожалуйста, как получить это многоуровневое раскрывающееся меню в angular