Sp-treeview NPM

sp-treeview

Installation

To install this library, run:

$ npm install sp-treeview --save

Consuming sp-treeview

You can import sp-treeview in any Angular application as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import SpTreeviewModule
import { SpTreeviewModule } from 'sp-treeview';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify SpTreeviewModule as an import
    SpTreeviewModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once sp-treeview is imported, you can use its components in your Angular application:

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>

<sp-treeview [nodes]="nodes" [config]="config" (change)="onChange($event)" (delete)="onDelete($event)" (addChild)="onAddChild($event)"></sp-treeview>

or

<sp-treeview-dropdown [placeholder]="'your placeholder here'" [nodes]="nodes" [config]="config" (change)="onChange($event)" (delete)="onDelete($event)" (addChild)="onAddChild($event)"></sp-treeview-dropdown>

The nodes that construct the tree are constructed using

Node
{
  name: string,
  value: any,
  children?: Node[],
  checked = false,
  collapsed = false,
  disabled = false,
  indeterminate = false,
  deleteNode?: boolean,
  addChild?: boolean
}

and configurations can ne provided using

Config
{
  select = SELECT_NONE,
  checkedValue = CHECKED_VALUE_LEAVES,
  deleteNode = false,
  addChild = false,
  addChildOnLeaves = false,
  filter = true,
  height = 'auto',
  showDropdownDefault = false
}