Package Exports

axiom-ngx-tree

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (axiom-ngx-tree) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Axiom Tree

Online Demo

Usage Demo

Stackblitz Demo

Edit demo on stackblitz

Installation

Install component package from npm :

npm install axiom-ngx-tree

Import component module :

import { AxiomNgxTreeModule } from 'axiom-ngx-tree';

...

@NgModule({
  imports: [
    BrowserModule,
    AxiomNgxTreeModule,
  ], 
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})

...

Usage

<ax-ngx-tree [axData]="data" 
    (axSelect)="select($event)" 
    [axSearch]= "search"
    [axSearchValue]="model" 
    [axTitle]="'country'" 
    [axId]="'id'" 
    [axSelectable]="true"
    [axDragDrop]="true"
    [axCollectionItem]="'items'" 
    (axSelection)="selected($event)"
    [axTemplate]="t">
</ax-ngx-tree>

Use custom templates for nodes

First, Create a template tag then use item property to access node data

<ng-template #t let-item="item">
    {{ item.first_name }} {{ item.last_name }}
</ng-template>

Then pass custom template reference to [axTemplate] input parameter

[axTemplate]="t"

Drag and drop support

For add drag and drop feature just set [axDragDrop] property value to true

Alt Text

@Input() Params

Name	Usage
axId	Data uniqueidentifier property name
axTitle	Default node title (Used in nodes without custom template )
axCollectionItem	Name list propery (like items in an object)
axSearchValue	Search model value for providing instant search
axSelectable	Make tree selectable
axSearch	Search function with type (item: any, search: string): boolean
axTemplate	Make custom node template
axDragDrop	Add drag and drop feature
axAsync	Set tree to work async
axLeaf	Data propery name to check a node is leaf in data tree or not (Just use in async mode)
axAsyncReader	Reader function to get async data for inner nodes
axData	Tree data

@Output() Params

Name	Usage
axSelection	Emit an array containing selected nodes
axSelect	Emit a object refers to current node

License

MIT