How to display the name of the sidebar item in the head panel?

Question

Angular

When clicking on the sidebar elements in the headpanel, the name of the element is displayed. I can't output up to 3 list nestings in the headpanel, it only outputs up to 2x.

<a mat-list-item [ngStyle]="{'padding-left': (depth * 12) + 'px'}" (click)="onItemSelected(item)"
  [ngClass]="{'active': item.route ? router.isActive(item.route, true): false, 'expanded': expanded}"
  class="menu-list-item">
  {{item.name}}
  <span fxFlex *ngIf="item.childItems && item.childItems.length" >
    <span fxFlex></span>
    <mat-icon [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
      expand_more
    </mat-icon>
  </span>
</a>

<div *ngIf="expanded">
  <app-sidebar-left *ngFor="let child of item.childItems" [item]="child" [depth]="depth+1" (click)="onItemChange(child)">
  </app-sidebar-left>
</div>

You need to re-walk through the elements already child.childeItems and display their names, but since I just started learning Angural I don’t know how to do it.