<mat-card class="cardWithShadow theme-card">
  <div class="p-24">
    <mat-card-title class="m-b-0">Treeview</mat-card-title>
  </div>
  <mat-card-content class="b-t-1 p-y-24">
    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
      <mat-tree-node
        *matTreeNodeDef="let node"
        matTreeNodeToggle
        matTreeNodePadding
      >
        <button mat-icon-button disabled></button>
        <mat-checkbox
          class="checklist-leaf-node"
          [checked]="checklistSelection.isSelected(node)"
          (change)="todoLeafItemSelectionToggle(node)" color="primary"
          >{{ node.item }}</mat-checkbox
        >
      </mat-tree-node>

      <mat-tree-node
        *matTreeNodeDef="let node; when: hasNoContent"
        matTreeNodePadding
      >
        <button mat-icon-button disabled></button>
        <div class="d-flex align-items-center m-b-8">
          <mat-form-field appearance="outline" class="m-r-12 hide-hint">
            <mat-label>New item...</mat-label>
            <input matInput #itemValue placeholder="Ex. Lettuce" />
          </mat-form-field>
          <button
            mat-flat-button
            color="primary"
            (click)="saveNode(node, itemValue.value)"
          >
            Save
          </button>
        </div>
      </mat-tree-node>

      <mat-tree-node
        *matTreeNodeDef="let node; when: hasChild"
        matTreeNodePadding
      >
        <button
          mat-icon-button
          matTreeNodeToggle
          [attr.aria-label]="'Toggle ' + node.item"
        >
          <mat-icon class="mat-icon-rtl-mirror">
            {{ treeControl.isExpanded(node) ? "expand_more" : "chevron_right" }}
          </mat-icon>
        </button>
        <mat-checkbox
          [checked]="descendantsAllSelected(node)"
          [indeterminate]="descendantsPartiallySelected(node)"
          (change)="todoItemSelectionToggle(node)" color="primary"
          >{{ node.item }}</mat-checkbox
        >
        <button mat-icon-button (click)="addNewItem(node)">
          <mat-icon>add</mat-icon>
        </button>
      </mat-tree-node>
    </mat-tree>
  </mat-card-content>
</mat-card>
