Как показать правильный подсписок в Angular?

Question

Я использую этот код для напоминания иерархии папок ie с HTML

    <ng-container *ngFor="let folder of folders">
        <ul style="margin-left: 10px;">
        <ng-container 
            [ngTemplateOutlet]="folderNode"
            [ngTemplateOutletContext]="{$implicit:folder}">
         </ng-container>
        </ul>
    </ng-container>
    <ng-template #folderNode let-folder>
       <li (click)="toggler()">{{folder.folderName}}<ul [ngStyle]="{'display': toggle()}">
            <li>{{folder.files}}</li>
            <ng-container *ngIf="folder.folders">
                <ng-container *ngFor="let subfolder of folder.folders">
                    <li class="subfolder">
                        <ng-container 
                        [ngTemplateOutlet]="folderNode"
                        [ngTemplateOutletContext]="{$implicit:subfolder}">
                     </ng-container> 
                    </li>
                </ng-container>
            </ng-container>
            </ul>
        </li>
    </ng-template>

в зависимости от того, как выглядит массив Array

  folders = [{
    id: 0,
    folderName: "Folder0",
    files: ["File 1", "File 2"],
    folders: [
      {
        id: 1,
        folderName: "Subfolder0",
        files: ["File 1", "File 2"],
        folders: [
          {
            id:3,
            files: ["File 1"],
            folderName: "Subsubfolder0",
            folders: []
          }
        ]
      }
    ],
  },
{
  id: 0,
  folderName: "Folder0",
  files: ["File 1", "File 2"],
  folders: [
    {
      id: 1,
      folderName: "Folder1",
      files: ["File 1", "File 2"],
      folders: [
        {
          id:3,
          files: ["File 1"],
          folderName: "Subfolder of folder1",
          folders: []
        }
      ]
    },
    {
      id: 2,
      folderName: "Folder2",
      files: ["File 1", "File 2"],
      folders: []
    }
  ]
}];

Я пытаюсь добавить ClickListener с именем toggler() для изменения boolean для добавления нового атрибута css в [ngStyle]

  toggler(){
    this.toggleSublist = !this.toggleSublist;
  }
  toggle(){
    if(this.toggleSublist)
      return 'none';
    else
      return 'block';
  }

, но при этом я открываю весь подсписок и подсписок подсписка и т. д. - но я пытаюсь добиться чего-то похожего на иерархию папок ie, как на ap c.

Есть ли у кого-нибудь подход, чтобы сначала показать файлы в первой «папке», в которой находится «подпапка», и, нажав на подпапку, затем будут показаны файлы в подпапке и т. Д.?