Getting Started

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

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

Source code for this demo

Installation

1. Install from npm

Shell

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

2. Import the CSS

styles.scss

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

3. Import the module

app.module.ts:

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

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

4. use the tree-root component:

app.component.ts:

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