Getting Started

This page will help you get started with angular-tree-component.
You'll be up and running in a jiffy!

Angular 2.X.X

Tree component currently supports Angular release version 2.x.x.
Angular 4 will be supported soon.

DEMO

Installation

Shell

npm install --save angular-tree-component

Basic usage

JavaScript

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

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

// usage:
@Component({
  selector: 'app',
  template: '<tree-root [nodes]="nodes"></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' }
          ]
        }
      ]
    }
  ];
}

Features

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

See more in the sidebar help pages.

SystemJS

You'll need to load the UMD bundle to work with SystemJS.
Add these lines to systemjs.config.js:

JavaScript

map: {
    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    …
    'angular-tree-component': 'node_modules/angular-tree-component/dist/angular-tree-component.umd.js',
    …
  }