<mat-tree *ngIf="treeControl" class="property-list" [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node matTreeNodePaddingIndent="14" *matTreeNodeDef="let node" matTreeNodePadding>
    <span class="name non-expandable"> {{ node.prop.name }} </span>:&nbsp;
    <ng-container *ngIf="!node.prop.descriptor.editable; else editable">
      <ng-property-preview (inspect)="inspect.emit(node)" [node]="node"></ng-property-preview>
    </ng-container>
    <ng-template #editable>
      <ng-property-editor
        [key]="node.prop.name"
        [initialValue]="node.prop.descriptor.value || node.prop.descriptor.preview"
        (updateValue)="handleUpdate(node, $event)"
      >
      </ng-property-editor>
    </ng-template>
  </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;
      <span class="name"> {{ node.prop.name }} </span>:&nbsp;
      <span class="value">
        {{ treeControl.isExpanded(node) ? '' : node.prop.descriptor.preview }}
      </span>
    </div>
  </mat-tree-node>
</mat-tree>
