{"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}
Getting Started
This page will help you get started with angular-tree-component.
You'll be up and running in a jiffy!