Guides
Guides

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

Installation

  1. Install from npm
npm install --save @circlon/angular-tree-component
  1. Import the CSS
@import '~@circlon/angular-tree-component/css/angular-tree-component.css';
  1. Import the module
import { TreeModule } from '@circlon/angular-tree-component';

@NgModule({
  imports: [..., TreeModule],
  ...
})
export class AppModule {
  ...
}
  1. 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.