August 17, 2022

Angular Draggable Tree Component | pioneer-tree

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>

angular-tree-component-add-node

draggable tree component for angular, Pioneer Tree Plugin/Github


See Demo And Download

Official Website(PioneerCode): Click Here

This superior jQuery/javascript plugin is developed by PioneerCode. For extra advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.