Ng-tree-antd NPM

ng-tree-antd

A antd style of based on angular-tree-component.

Demo

Dependencies

angular-tree-component ^7.0.1

Usage & Installation

Install ng-tree-antd from npm

npm install ng-tree-antd --save

Import the NzTreeModule in to your root AppModule.

import { NzTreeModule } from 'ng-tree-antd';
import { NgZorroAntdModule } from 'ng-zorro-antd';

@NgModule({
    imports: [BrowserModule, NzTreeModule, NgZorroAntdModule.forRoot()],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Usage

import { Component } from '@angular/core';
import { generateData } from './generate-data';

@Component({
  selector: 'demo',
  template: `
  <nz-tree [nzNodes]="nodes"
           [nzOptions]="options"
           (nzEvent)="onEvent($event)"></nz-tree>
  `
})
export class DemoDraggableComponent {
  nodes = [
    {
      name: 'root1'
    },
    {
      name: 'root2'
    },
    {
      name: 'root3'
    },
    {
      name: 'async root4',
      hasChildren: true
    }
  ];

  options = {
    allowDrag: true
  };

  onEvent(ev: any) {
    console.log('onEvent', ev);
  }
}

`nzNodes` DATA

the nzNodes is array of the tree, and each node may contain the following fileds:

id unique id
name default displayed filed, you can setting displayField of options property
checked specifies whether the checkbox is selected
disableCheckbox disable checkbox
halfChecked achieve a 'check all' effect
children an array of the node's children.
hasChildren for async data load, so you need setting getChildren of options property

API

Name	Type	Default	Summary
nzNodes	`any[]`		see inputs
nzAutoExpandParent	`boolean, number`	`false`	是否自动展开父节点，当数字时展开最大节点
nzAllowChildLinkage	`boolean`	`true`	是否开启父节点的checkbox状态的会影响子节点状态
nzAllowParentLinkage	`boolean`	`true`	是否开启子节点的checkbox状态的会影响父节点状态
nzCheckable	`boolean`	`false`	Add a `checkbox` before the node
nzShowLine	`boolean`	`false`	Shows a connecting line
nzOptions	`TreeOptions`		see options
nzTitle	`TemplateRef`		Custom title
nzLoading	`TemplateRef`		Custom Loading
nzShiftSelectedMulti	`boolean`	`true`	selected multi when shift key
nzToggleExpanded	`EventEmitter`		see events
nzActivate	`EventEmitter`
nzDeactivate	`EventEmitter`
nzFocus	`EventEmitter`
nzBlur	`EventEmitter`
nzUpdateData	`EventEmitter`
nzInitialized	`EventEmitter`
nzMoveNode	`EventEmitter`
nzCopyNode	`EventEmitter`
nzLoadNodeChildren	`EventEmitter`
nzChangeFilter	`EventEmitter`
nzEvent	`EventEmitter`
nzStateChange	`EventEmitter`
nzCheck	`EventEmitter`		fired `checkbox` is changed

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

Use GitHub Issues board to report bugs and feature requests (not our email address)
Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!