Angular Draggable Tree Component

Pioneer Tree is an angular tree component that aims to stay out of your way. It gives you the freedom and tools to produce dynamic tree components in tags that you define.

angular tree component add node, angular tree component click event, angular mat tree drag and drop, drag and drop treeview in angular, angular treeview example

Features

Intuitive markup defined by you.
Collapsible nodes
Selected node tracking
Opt-in public state tracking
Drag & Drop
Sort tracking
Events
- Node Dropped
Filtering
Configurable
- Sort property binding
- Child property binding
- Default collapse & expand the state
Public API
- Expand or Collapse all
- Collapse all, expand and set the node as active.

How to make use of it:

Installation:

$ npm install @pioneer-code/pioneer-tree –save

Usage

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