Getting Started

Angular 2..6

Angular Tree Component supports Angular release version 2.x.x through 6.x.x.

DEMO

Installation

npm install --save angular-tree-component

Basic usage

Import the CSS

@import '~angular-tree-component/dist/angular-tree-component.css';

Import the module, and use the tree-root component:

// module:
import { TreeModule } from 'angular-tree-component';

@NgModule({
  imports: [..., TreeModule],
  ...
})
export class AppModule {
  ...
}

// usage:
@Component({
  selector: 'app',
  template: '<tree-root [nodes]="nodes" [options]="options"></tree-root>'
});

export class App {
  nodes = [
    {
      id: 1,
      name: 'root1',
      children: [
        { id: 2, name: 'child1' },
        { id: 3, name: 'child2' }
      ]
    },
    {
      id: 4,
      name: 'root2',
      children: [
        { id: 5, name: 'child2.1' },
        {
          id: 6,
          name: 'child2.2',
          children: [
            { id: 7, name: 'subsub' }
          ]
        }
      ]
    }
  ];
  options = {};
}

Features

Keyboard navigation
Drag & Drop
Virtual Scroll to support large trees
Checkboxes
Async children load
Expand / collapse / select nodes
Events: activate, collapse, expand, focus, etc.
Custom node template (string or component)
Custom loading component (for async data)
Custom children / name attributes
API
Very basic customizable CSS

See more in the sidebar help pages.

Professional Support

Please fill this form to get quick and professional support (bug report / feature request / help implementing / etc.):
https://goo.gl/forms/9KobHoFkjSMtGC2K3

note: This project is completely free and open to use under the MIT license.
If you wish to get help from fellow community developers, feel free to use Github issues.

Sorry guys, SystemJS is not supported.
Modern web applications use bundlers like Webpack.

We've tried to support SystemJS for a year, but it just causes too many issues.