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

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)