I am trying to create tabs in tabs view for a simple project. I have an object like this which is of a "tree" structure.

I want to present this data as in the tabs mode like in the image shown below

Object in JSON form https://pastebin.com/EzLUkvCR

How can I achieve these intervals/tabs view with given object?

I am using angular 13 and currently I am using angular template to create this view but can't get the right intervals.

I went further with the object https://pastebin.com/k39En9AF

angular template

<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>