Estoy tratando de crear pestañas en la vista de pestañas para un proyecto simple. Tengo un objeto como este que tiene una estructura de "árbol".

Quiero presentar estos datos como en el modo de pestañas como en la imagen que se muestra a continuación

Objeto en formato JSON https://pastebin.com/EzLUkvCR

¿Cómo puedo lograr esta vista de intervalos/pestañas con un objeto dado?

Estoy usando angular 13 y actualmente estoy usando una plantilla angular para crear esta vista, pero no puedo obtener los intervalos correctos.

Fui más allá con el objeto https://pastebin.com/k39En9AF

plantilla angular

 <ng-template #quizInterval let-list> <div class="row my-1 mb-5 justify-content-center align-content-center align-items-center"> <div *ngFor="let item of list" class="interval-col col" [class.active-interval]="item.active" (click)="onIntervalClick(item)"> {{item.totalQuiz}} <!-- Range: {{item?.range}} Idx {{item.index}}--> </div> </div> <ng-container *ngIf="list[getIndex(list)]?.child?.length > 0 && list[getIndex(list)]?.child[0]?.child"> <ng-container *ngTemplateOutlet="quizInterval; context:{ $implicit: list[getIndex(list)]?.child }"></ng-container> </ng-container> </ng-template> <ng-container *ngTemplateOutlet="quizInterval; context:{ $implicit: intervalsSizesList }"></ng-container>