HTML

pioneer-tree component

A representation of a tree is made up of the following.

pioneer-tree Component

• The root markup representation of tree.
  • Includes first iteration of top level nodes.

<ul pioneer-tree
  [configuration]="configuration"
  [nodes]="nodes"
  #pt>
  <li pioneer-tree-node
      *ngFor="let node of nodes"
      (nodeDropped)="onNodeDropped($event)"
      [nodeTemplate]="nodeTemplate"
      [repeaterTemplate]="repeaterTemplate" 
      [node]="node">
  </li>
</ul>

nodeTemplate

• Typically defines UI elements of a node.
• Adds functional components (pt-handle, pt-collapse, etc.).

<ng-template #nodeTemplate let-node>
  <span pioneer-tree-collapse 
    [node]="node">
    <i class="fa"
      [ngClass]="this.node.pioneerTreeNode.isCollapsed() ? 'fa-folder' : 'fa-folder-open'">
    </i>
  </span>
  <span pioneer-tree-handle 
    [node]="node">
    {{node.name}} - {{node.pioneerTreeNode.sortIndex}}
  </span>
</ng-template>

repeaterTemplate

• Representation of child node(s).
• Produces nested children to the x-level.
• In a typical implementation, the markup looks a lot like the pioneer-tree root markup.
  • Instead of iterating over top level nodes, child collections are targeted.

<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>