{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"Getting Started","type":"basic","slug":"getting-started","excerpt":"This page will help you get started with angular-tree-component.\nYou'll be up and running in a jiffy!","body":"[block:api-header]\n{\n  \"title\": \"Slack Community\"\n}\n[/block]\nThis project is completely free and open to use under the MIT license.\n\nThe best way to get support from the community: [https://angular-tree-component.herokuapp.com/](Slack Community)\n\nFrom version 9 on all Angular Tree Component versions are under :::at:::circlon/angular-tree-component. Version 8\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Supported Angular Versions\"\n}\n[/block]\nAngular Tree Component 8.x.x supports Angular release version 6.x.x and above.\nFor older versions please install version 7.x.x\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"DEMO\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<iframe src=\\\"https://angular-tree-component.azurewebsites.net/#/basic\\\" width=\\\"500px\\\" height=\\\"300px\\\"></iframe>\\n\"\n}\n[/block]\n\n[block:html]\n{\n  \"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>\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Installation\"\n}\n[/block]\n1. Install from npm\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"npm install --save @circlon/angular-tree-component\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n2. Import the CSS\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"@import '[email protected]/angular-tree-component/css/angular-tree-component.css';\",\n      \"language\": \"scss\",\n      \"name\": \"styles.scss\"\n    }\n  ]\n}\n[/block]\n3. Import the module\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import { TreeModule } from '@circlon/angular-tree-component';\\n\\[email protected]({\\n  imports: [..., TreeModule],\\n  ...\\n})\\nexport class AppModule {\\n  ...\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"app.module.ts:\"\n    }\n  ]\n}\n[/block]\n4. use the tree-root component:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"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}\",\n      \"language\": \"javascript\",\n      \"name\": \"app.component.ts:\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Features\"\n}\n[/block]\n* Keyboard navigation\n* Drag & Drop\n* Virtual Scroll to support large trees\n* Checkboxes\n* Async children load\n* Expand / collapse / select nodes\n* Events: activate, collapse, expand, focus, etc.\n* Custom node template (string or component)\n* Custom loading component (for async data)\n* Custom children / name attributes\n* API\n* Very basic customizable CSS\n\nSee more in the sidebar help pages.","updates":["5709f1f3ade45d0e00c1ad08","5709f24242cbb61700228c76","58c5ed4757f4c1250087cd28","5942e1667b1e4c0037820b34","59ad67aab2c6f80037bd2ea6"],"order":0,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5c27be9e2b75bd0045dc745b","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Basic","slug":"getting-started","order":0,"from_sync":false,"reference":false,"_id":"5c27be9e2b75bd0045dc7458","version":"5c27be9e2b75bd0045dc7476","project":"5707c6875309d117006948d4","createdAt":"2017-07-15T07:28:09.870Z","__v":0},"project":"5707c6875309d117006948d4","parentDoc":null,"user":"54d742a80771980d0052f4b5","version":{"version":"8.2.0","version_clean":"8.2.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["5c27be9e2b75bd0045dc7458","5c27be9e2b75bd0045dc7459","5c27be9e2b75bd0045dc745a"],"_id":"5c27be9e2b75bd0045dc7476","project":"5707c6875309d117006948d4","__v":0,"forked_from":"5b65b08eb1906e000319f872","createdAt":"2018-03-23T13:06:33.352Z","releaseDate":"2018-03-23T13:06:33.352Z"},"createdAt":"2016-04-08T14:56:07.709Z","githubsync":"","__v":0}

Basic

Guides

API reference

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 '[email protected]/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\[email protected]({\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.