项目作者: mohammadmusaei

项目描述 :
ngx-tree component for Angular. support nested object,async data,drag and drop,instant search
高级语言: TypeScript
项目地址: git://github.com/mohammadmusaei/AxiomTree.git
创建时间: 2019-01-26T20:30:24Z
项目社区:https://github.com/mohammadmusaei/AxiomTree

开源协议:MIT License

下载


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 :
  1. import { AxiomNgxTreeModule } from 'axiom-ngx-tree';
  2. ...
  3. @NgModule({
  4. imports: [
  5. BrowserModule,
  6. AxiomNgxTreeModule,
  7. ],
  8. declarations: [
  9. AppComponent
  10. ],
  11. bootstrap: [AppComponent]
  12. })
  13. ...

Usage

  1. <ax-ngx-tree [axData]="data"
  2. (axSelect)="select($event)"
  3. [axSearch]= "search"
  4. [axSearchValue]="model"
  5. [axTitle]="'country'"
  6. [axId]="'id'"
  7. [axSelectable]="true"
  8. [axDragDrop]="true"
  9. [axCollectionItem]="'items'"
  10. (axSelection)="selected($event)"
  11. [axTemplate]="t">
  12. </ax-ngx-tree>
Use custom templates for nodes

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

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

Then pass custom template reference to [axTemplate] input parameter

  1. [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