{"_id":"5c27be9e2b75bd0045dc745b","category":{"_id":"5c27be9e2b75bd0045dc7458","version":"5c27be9e2b75bd0045dc7476","project":"5707c6875309d117006948d4","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-07-15T07:28:09.870Z","from_sync":false,"order":0,"slug":"getting-started","title":"Basic"},"project":"5707c6875309d117006948d4","parentDoc":null,"user":"54d742a80771980d0052f4b5","version":{"_id":"5c27be9e2b75bd0045dc7476","project":"5707c6875309d117006948d4","__v":0,"forked_from":"5b65b08eb1906e000319f872","createdAt":"2018-03-23T13:06:33.352Z","releaseDate":"2018-03-23T13:06:33.352Z","categories":["5c27be9e2b75bd0045dc7458","5c27be9e2b75bd0045dc7459","5c27be9e2b75bd0045dc745a"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"8.2.0","version":"8.2.0"},"githubsync":"","__v":0,"updates":["5709f1f3ade45d0e00c1ad08","5709f24242cbb61700228c76","58c5ed4757f4c1250087cd28","5942e1667b1e4c0037820b34","59ad67aab2c6f80037bd2ea6"],"next":{"pages":[],"description":""},"createdAt":"2016-04-08T14:56:07.709Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"[block:api-header]\n{\n  \"title\": \"Slack\"\n}\n[/block]\nThe best way to get support from the community: [https://angular-tree-component.herokuapp.com/](Slack Community)\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://rawgit.com/500tech/angular-tree-component/master/example/cli/dist/#/basic\\\" width=\\\"500px\\\" height=\\\"300px\\\"></iframe>\\n\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<a href=\\\"https://github.com/500tech/angular-tree-component/blob/master/example/cli/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 angular-tree-component\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n2. Import the CSS\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \":::at:::import '~angular-tree-component/dist/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 'angular-tree-component';\\n\\n@NgModule({\\n  imports: [..., TreeModule.forRoot()],\\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.\n[block:api-header]\n{\n  \"title\": \"Professional Support\"\n}\n[/block]\nPlease fill this form to get quick and professional support (bug report / feature request / help implementing / etc.):\n[https://goo.gl/forms/9KobHoFkjSMtGC2K3](https://goo.gl/forms/9KobHoFkjSMtGC2K3)\n\n* note: This project is completely free and open to use under the MIT license.\nIf you wish to get help from fellow community developers, feel free to use Github issues.\n\nSorry guys, SystemJS is not supported.\nModern web applications use bundlers like Webpack.\n\nWe've tried to support SystemJS for a year, but it just causes too many issues.","excerpt":"This page will help you get started with angular-tree-component.\nYou'll be up and running in a jiffy!","slug":"getting-started","type":"basic","title":"Getting Started"}

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" } [/block] The best way to get support from the community: [https://angular-tree-component.herokuapp.com/](Slack Community) [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://rawgit.com/500tech/angular-tree-component/master/example/cli/dist/#/basic\" width=\"500px\" height=\"300px\"></iframe>\n" } [/block] [block:html] { "html": "<a href=\"https://github.com/500tech/angular-tree-component/blob/master/example/cli/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 angular-tree-component", "language": "shell" } ] } [/block] 2. Import the CSS [block:code] { "codes": [ { "code": "@import '~angular-tree-component/dist/angular-tree-component.css';", "language": "scss", "name": "styles.scss" } ] } [/block] 3. Import the module [block:code] { "codes": [ { "code": "import { TreeModule } from 'angular-tree-component';\n\n@NgModule({\n imports: [..., TreeModule.forRoot()],\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. [block:api-header] { "title": "Professional Support" } [/block] Please fill this form to get quick and professional support (bug report / feature request / help implementing / etc.): [https://goo.gl/forms/9KobHoFkjSMtGC2K3](https://goo.gl/forms/9KobHoFkjSMtGC2K3) * note: This project is completely free and open to use under the MIT license. If you wish to get help from fellow community developers, feel free to use Github issues. Sorry guys, SystemJS is not supported. Modern web applications use bundlers like Webpack. We've tried to support SystemJS for a year, but it just causes too many issues.