Pioneer Tree

An Angular Tree Component the aims to stay out of your way. Giving you the freedom and tools necessary to produce dynamic tree components in markup that is defined and controlled by you.

Features

  • Intuitive Markup
  • Drag & Drop
  • Collapsible nodes
  • Event subscription
  • Sort tracking
  • Selected node tracking
  • Opt-in public state tracking
  • Configurable

Coming Soon!

  • Filtering
  • Add & Delete

HTML

<ng-template #nodeTemplate let-node>
  <ul class="menu content">
    <li>
      <span pioneer-tree-collapse
        [node]="node">
        <i class="fa"
          [ngClass]="this.node.pioneerTreeNode.isCollapsed() ? 'fa-folder' : 'fa-folder-open'">
        </i>
      </span>
    </li>
    <li>
      <span pioneer-tree-handle [node]="node">
        {{node.name}} - {{node.pioneerTreeNode.sortIndex}} :
      </span>
    </li>
    <li>
      <a title="Collapse All, Expand This, Set Active"
        (click)="ptComponent.pioneerTree.collapseAllExpandThisSetActive(node)">
        <i class="fa fa-heart-o"></i>
      </a>
    </li>
  </ul>
</ng-template>
<ng-template #repeaterTemplate let-node>
  <ul pioneer-tree-repeater [nodes]="node.children">
    <li pioneer-tree-node
      *ngFor="let node of node.children" (nodeDropped)="onNodeDropped($event)"
      [nodeTemplate]="nodeTemplate"
      [repeaterTemplate]="repeaterTemplate" [node]="node">
    </li>
  </ul>
</ng-template>
<ul pioneer-tree #pt [configuration]="configuration" [nodes]="nodes">
  <li pioneer-tree-node *ngFor="let node of nodes"
    (nodeDropped)="onNodeDropped($event)"
    [nodeTemplate]="nodeTemplate"
    [repeaterTemplate]="repeaterTemplate"
    [node]="node">
  </li>
</ul>