Baumstruktur (mat-tree) nicht sichtbar

[Lisun4ik]

Der Code von mir kommt von einem Tutorial, aber führt nicht zum gewünschten Ergebnis.

Hier die Datenaufstellung:

interface CourseNode {
name: string;
children?: CourseNode[];
}

const TREE_DATA: CourseNode[] = [
{
name: 'Angular for beginners'
}, {
name: 'Angular Component @Input()'
}, {
name: 'Angular Component @Output()'
}, {
name: 'Angular Material in Depth',
children: [
{
name: 'Introduktion to Angular Material',
children: [
{
name: 'Form Components'
}, {
name: 'Navigation and Containers'
}
]
}
]
}
]

Hier die DataSource und TreeControl:

nestedDataSource: MatTreeNestedDataSource<CourseNode> = new MatTreeNestedDataSource<CourseNode>();
nestedTreeControl: NestedTreeControl<CourseNode> = new NestedTreeControl<CourseNode>(node => node.children);

Hier mein HTML-Code:

<mat-tree class="bg_standard_{{werk}}" [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
{{node.name}}
</mat-tree-node>
</mat-tree>

<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
<div class="mat-tree-node">
<button mat-icon-button matTreeNodeToggle>
<mat-icon>
{{nestedTreeControl.isExpanded(node) ? "expand_more": "chevron_right"}}
</mat-icon>
</button>
{{node.name}}
</div>
<div class="nested-node">
<ng-container matTreeNodeOutlet></ng-container>
</div>
</mat-nested-tree-node>

Hier mein app.modules.ts:

import {MatIconModule} from "@angular/material/icon";
@NgModule({
declarations: [
...
],
imports: [
...
BrowserAnimationsModule,
MatIconModule,
MatTreeModule
],
providers: [
..
],
bootstrap: [AppComponent]
})

An der Oberfläche werden die oberen Knoten angezeigt, was aus den ersten HTML-Tag hervorgeht:


Das "mat-nested-tree-node"-Tag wird praktisch komplett ignoriert. Im Inspektor sieht man nur dieses Komentar:

<!--bindings={
"ng-reflect-when": "hasNestedChild(index, node) {\n"
}-->

Ich wäre für jede Hilfe Dankbar! Bin ein absoluter Angular Anfänger.