Как использовать обход дерева с помощью кнопки Angular Material

Question

У меня есть древовидное меню, в котором я хочу иметь возможность выбрать любой узел в дереве, перемещаясь по меню.В настоящее время я делаю это следующим образом:

<button mat-raised-button [matMenuTriggerFor]="tree_0">
  ChooseTree    
</button>

<mat-menu #tree_0="matMenu" [overlapTrigger]="false">
  <ng-template matMenuContent>
    <ng-container *ngFor= "let item of treeData.children">
        <button mat-menu-item *ngIf = "item"
            [matMenuTriggerFor]="tree_1"
            [matMenuTriggerData]="{items:item.children}">
          {{item.name}}
        </button>
      </ng-container>
    </ng-template>
</mat-menu>

<mat-menu #tree_1="matMenu" [overlapTrigger]="false">
  <ng-template matMenuContent let-items="items">
    <ng-container *ngFor= "let item of items">
        <button mat-menu-item *ngIf = "item">
          {{item.name}}
        </button>
      </ng-container>
    </ng-template>
</mat-menu>

Однако первая проблема заключается в том, что мне нужно создать новый <mat-menu> для каждого уровня;ссылка на тот же шаблон не работает.Вторая проблема (и та, которая меня больше всего интересует) заключается в том, что когда вы быстро переключаетесь с 1 на 2 и не предоставляете возможность создания экземпляра следующего уровня, вы получаете ошибки в консоли.Как преодолеть эти ошибки?Это StackBlitz является рабочим демо.