ng-tree-antd

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

Demo

Live Demo & stackblitz

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	是否自动展开父节点，当数字时展开最大节点
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:

1. Use GitHub Issues board to report bugs and feature requests (not our email address)
2. 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!

License

The MIT License (see the LICENSE file for the full text)