Setup

Requirements

• Angular 4 or greater

Download

npm

npm i @pioneer-code/pioneer-tree

Import Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { PioneerTreeModule } from '@pioneer-code/pioneer-tree';

@NgModule({
  imports: [
    BrowserModule,
    PioneerTreeModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Styles

Import the prebuilt style located at ..\node_modules\@pioneer-code\pioneer-tree\themes

<link rel="stylesheet" href="pioneer-tree.min.css">

Or, import the scss file directly into your styling pipeline.

@import "../node_modules/@pioneer-code/pioneer-tree/scss/pioneer-tree";

Basic Markup

For information on how to structure your HTML, head on over to the HTML page.

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