EMS/src/app/app.component.html

@if ($employees | async; as employees) {
    <mat-tree #tree [dataSource]="employees" [childrenAccessor]="childrenAccessor">
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
            {{ node.firstName }}
            @if (tree.isExpanded(node)) {
                <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.id">
                    <mat-icon>expand_more</mat-icon>
                </button>
                <ul>
                    @for (entry of node | keyvalue; track entry) {
                        <li>{{ entry.key }}: <code>{{ entry.value }}</code></li>
                    }
                </ul>
            } @else {
                <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.id">
                    <mat-icon>chevron_right</mat-icon>
                </button>
            }
        </mat-tree-node>
    </mat-tree>
}

<router-outlet/>