{"_id":"598622fad09433000f1b97ec","category":{"_id":"598622f9d09433000f1b97de","version":"598622f9d09433000f1b97dd","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":"598622f9d09433000f1b97dd","project":"5707c6875309d117006948d4","__v":1,"createdAt":"2017-08-05T19:56:41.267Z","releaseDate":"2017-08-05T19:56:41.267Z","categories":["598622f9d09433000f1b97de","598622f9d09433000f1b97df","598622f9d09433000f1b97e0","598622f9d09433000f1b97e1"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"4.1.0","version":"4.1.0"},"__v":0,"updates":["5709f1f3ade45d0e00c1ad08","5709f24242cbb61700228c76","58c5ed4757f4c1250087cd28","5942e1667b1e4c0037820b34"],"next":{"pages":[],"description":""},"createdAt":"2016-04-08T14:56:07.709Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Angular 2 + 4\"\n}\n[/block]\nTree component currently supports Angular release version 2.x.x and 4.x.x.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"DEMO\"\n}\n[/block]\n\n[block:embed]\n{\n  \"html\": false,\n  \"url\": \"https://rawgit.com/500tech/angular-tree-component/master/example/cli/dist/index.html\",\n  \"title\": \"Cli\",\n  \"favicon\": \"https://rawgit.com/500tech/angular2-tree-component/master/example/cli/dist/favicon.ico\",\n  \"iframe\": true,\n  \"height\": \"700px\",\n  \"width\": \"100%\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Installation\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"npm install --save angular-tree-component\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Basic usage\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// module:\\nimport { TreeModule } from 'angular-tree-component';\\n\\n:::at:::NgModule({\\n  imports: [..., TreeModule],\\n  ...\\n})\\nexport class AppModule {\\n  ...\\n}\\n\\n// usage:\\n@Component({\\n  selector: 'app',\\n  template: '<tree-root [nodes]=\\\"nodes\\\"></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}\",\n      \"language\": \"javascript\"\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* Async children load\n* Expand / collapse / select nodes\n* Events: select, deselect, 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 to control the tree from outside\n* Very basic customizable CSS\n\nSee more in the sidebar help pages.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"SystemJS\"\n}\n[/block]\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

Complete API

Guides

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] { "type": "basic", "title": "Angular 2 + 4" } [/block] Tree component currently supports Angular release version 2.x.x and 4.x.x. [block:api-header] { "type": "basic", "title": "DEMO" } [/block] [block:embed] { "html": false, "url": "https://rawgit.com/500tech/angular-tree-component/master/example/cli/dist/index.html", "title": "Cli", "favicon": "https://rawgit.com/500tech/angular2-tree-component/master/example/cli/dist/favicon.ico", "iframe": true, "height": "700px", "width": "100%" } [/block] [block:api-header] { "type": "basic", "title": "Installation" } [/block] [block:code] { "codes": [ { "code": "npm install --save angular-tree-component", "language": "shell" } ] } [/block] [block:api-header] { "type": "basic", "title": "Basic usage" } [/block] [block:code] { "codes": [ { "code": "// module:\nimport { TreeModule } from 'angular-tree-component';\n\n@NgModule({\n imports: [..., TreeModule],\n ...\n})\nexport class AppModule {\n ...\n}\n\n// usage:\n@Component({\n selector: 'app',\n template: '<tree-root [nodes]=\"nodes\"></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}", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Features" } [/block] * Keyboard navigation * Drag & Drop * Virtual Scroll to support large trees * Async children load * Expand / collapse / select nodes * Events: select, deselect, collapse, expand, focus, etc. * Custom node template (string or component) * Custom loading component (for async data) * Custom children / name attributes * API to control the tree from outside * Very basic customizable CSS See more in the sidebar help pages. [block:api-header] { "type": "basic", "title": "SystemJS" } [/block] 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.