@if (treeControl()) {
  <mat-tree class="property-list" [dataSource]="dataSource()" [treeControl]="treeControl()">
    <mat-tree-node matTreeNodePaddingIndent="14" *matTreeNodeDef="let node" matTreeNodePadding>
      @if (node.level > 0) {
        <span class="name non-expandable">{{ node.prop.name }}</span
        >:&nbsp;
      }
      {{node.prop.descriptor.preview}}
    </mat-tree-node>
    <mat-tree-node
      matTreeNodePaddingIndent="14"
      *matTreeNodeDef="let node; when: hasChild"
      matTreeNodePadding
    >
      <div (click)="toggle(node)">
        <mat-icon class="mat-icon-rtl-mirror">
          {{ treeControl().isExpanded(node) ? 'expand_more' : 'chevron_right' }}
        </mat-icon>
        &nbsp;
        @if (node.level > 0) {
          <span class="name">{{ node.prop.name }}</span
          >:
        }
        <span class="value">
          {{ node.prop.descriptor.preview }}
        </span>
      </div>
    </mat-tree-node>
  </mat-tree>
}