kalidea/kaligraphi

<h1>Treeview</h1>

<div class="example">

  <kal-tree [dataSource]="dataSource" [treeControl]="treeControl" (selectionChanged)="changed($event);">

    <kal-tree-node *kalTreeNodeDef="let node" [kalDrag]="node" (kalDrop)="drop($event)" kalTreeNodePadding>
      {{node.title}}
    </kal-tree-node>

    <kal-tree-node
      kalTreeNodePadding
      *kalTreeNodeDef="let node; when: hasNestedChild"
      [kalDrag]="node"
      (kalDrop)="drop($event)">
      <kal-icon class="mat-icon-rtl-mirror" kalTreeNodeToggle>
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </kal-icon>
      {{node.title}}
    </kal-tree-node>

  </kal-tree>
</div>


<div class="configurator">
  <kal-form-field>
    <kal-select label="select node" (valueChanges)="select($event)" tabIndex="1">
      <kal-option [value]="node.id" *ngFor="let node of dataSource._flattenedData.value">
        {{ node.title }}
      </kal-option>
    </kal-select>
  </kal-form-field>

  <kal-form-field>
    <kal-button (click)="collapseAll()" kalTheme="primary">collapseAll</kal-button>
  </kal-form-field>

    <kal-form-field>
    <kal-button (click)="expandAll()" kalTheme="primary">expandAll</kal-button>
    </kal-form-field>
</div>