---
agentTools:
  projectIndex: https://angular2-tree.readme.io/llms.txt
---

# Getting Started

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

[block:api-header]
{
  "title": "Slack Community"
}
[/block]

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

[block:api-header]
{
  "type": "basic",
  "title": "Supported Angular Versions"
}
[/block]

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

[block:api-header]
{
  "type": "basic",
  "title": "DEMO"
}
[/block]

[block:html]
{
  "html": "<iframe src=\"https://angular-tree-component.azurewebsites.net/#/basic\" width=\"500px\" height=\"300px\"></iframe>\n"
}
[/block]

[block:html]
{
  "html": "<a href=\"https://github.com/CirclonGroup/angular-tree-component/blob/master/projects/example-app/src/app/basictree/basictree.component.ts\" target=\"_blank\">Source code for this demo</a>"
}
[/block]

[block:api-header]
{
  "type": "basic",
  "title": "Installation"
}
[/block]

1. Install from npm

[block:code]
{
  "codes": [
    {
      "code": "npm install --save @circlon/angular-tree-component",
      "language": "shell"
    }
  ]
}
[/block]

2. Import the CSS

[block:code]
{
  "codes": [
    {
      "code": "@import '~@circlon/angular-tree-component/css/angular-tree-component.css';",
      "language": "scss",
      "name": "styles.scss"
    }
  ]
}
[/block]

3. Import the module

[block:code]
{
  "codes": [
    {
      "code": "import { TreeModule } from '@circlon/angular-tree-component';\n\n@NgModule({\n  imports: [..., TreeModule],\n  ...\n})\nexport class AppModule {\n  ...\n}",
      "language": "javascript",
      "name": "app.module.ts:"
    }
  ]
}
[/block]

4. use the tree-root component:

[block:code]
{
  "codes": [
    {
      "code": "@Component({\n  selector: 'app',\n  template: '<tree-root [nodes]=\"nodes\" [options]=\"options\"></tree-root>'\n});\n\nexport class App {\n  nodes = [\n    {\n      id: 1,\n      name: 'root1',\n      children: [\n        { id: 2, name: 'child1' },\n        { id: 3, name: 'child2' }\n      ]\n    },\n    {\n      id: 4,\n      name: 'root2',\n      children: [\n        { id: 5, name: 'child2.1' },\n        {\n          id: 6,\n          name: 'child2.2',\n          children: [\n            { id: 7, name: 'subsub' }\n          ]\n        }\n      ]\n    }\n  ];\n  options = {};\n}",
      "language": "javascript",
      "name": "app.component.ts:"
    }
  ]
}
[/block]

[block:api-header]
{
  "type": "basic",
  "title": "Features"
}
[/block]

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