Пользовательское угловое дерево с использованием ngTemplateOutlet и ng-template

Question

Я пытаюсь создать пользовательский компонент дерева уровня N, но У меня проблема с отображением листьев дерева (узлы без дочерних элементов) с использованием ng-template .Узлы с дочерними элементами отображаются правильно, но последние узлы ничего не отображают.

Вот мой код:

Модель:

export class Node
{
    Name: string;
    IsExpanded = false;
    IsExpandable = true;
    Children = new Array<any>();
}

TreeNodeComponent

import { Component, Output, EventEmitter, Input, ContentChild, TemplateRef, ElementRef } from '@angular/core';


@Component({
// tslint:disable-next-line:component-selector
selector: 'tree-node',
styleUrls: ['tree-node.component.scss'],
templateUrl: 'tree-node.component.html'
})
export class TreeNodeComponent
{

@Input() Children: Array<any>;

@Input() Key: string;

@ContentChild('LeafTemplate') LeafTemplate: TemplateRef<ElementRef>;

}

tree-node.component.html

<div class="tree-node"
 *ngFor="let child of Children">
<mat-expansion-panel *ngIf="child.IsExpandable"
                   hideToggle="true"
                   (opened)="child.IsExpanded=true"
                   (closed)="child.IsExpanded=false"
                   [(expanded)]="child.IsExpanded">
<mat-expansion-panel-header [collapsedHeight]="'48px'"
                            [expandedHeight]="'54px'">
  <mat-panel-title>
    <mat-icon *ngIf="!child.IsExpanded">chevron_right</mat-icon>
    <mat-icon *ngIf="child.IsExpanded">expand_more</mat-icon>
    {{child.Name}}
  </mat-panel-title>
</mat-expansion-panel-header>

<ng-template matExpansionPanelContent>
  <tree-node [Children]="child.Children"
             Key="Children">
  </tree-node>
</ng-template>

</mat-expansion-panel>

<ng-template *ngIf="!child.IsExpandable"
           [ngTemplateOutlet]="LeafTemplate"
           [ngTemplateOutletContext]="{item:child}"></ng-template>

</div>

И использовать его как:

<tree-node [Children]="Nodes" Key="Children">
    <ng-template #LeafTemplate
                 let-item="item">
        <h4> {{item.Name}}</h4>
    </ng-template>
</tree-node>

Любая подсказка, что я делаю не так?

Вот его stackblitz