Getting Started

Slack Community

This project is completely free and open to use under the MIT license.

The best way to get support from the community: [https://angular-tree-component.herokuapp.com/](Slack Community)

From version 9 on all Angular Tree Component versions are under @circlon/angular-tree-component. Version 8

Supported Angular Versions

Angular Tree Component 8.x.x supports Angular release version 6.x.x and above.
For older versions please install version 7.x.x

DEMO

Installation

1. Install from npm

npm install --save @circlon/angular-tree-component

2. Import the CSS

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

3. Import the module

import { TreeModule } from '@circlon/angular-tree-component';

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

4. use the tree-root component:

@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.