Axiom Tree

Online Demo

Stackblitz Demo

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

@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

mohammadmusaei/AxiomTree