{"_id":"598622fad09433000f1b97ed","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"},"parentDoc":null,"project":"5707c6875309d117006948d4","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":["594c77d7d88dfb001c830c12"],"next":{"pages":[],"description":""},"createdAt":"2016-09-14T12:54:29.108Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"Inputs to Tree component:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"    <tree-root [nodes]=\\\"nodes\\\" [focused]=\\\"true\\\" [options]=\\\"options\\\"></tree-root>\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"nodes\"\n}\n[/block]\nArray of root nodes of the tree.\nEach node may contain the following fields:\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"id\",\n    \"0-1\": \"Unique ID for the node.\\nIf one is not supplied it will be created by the tree library.\",\n    \"1-0\": \"name\",\n    \"h-0\": \"Property\",\n    \"h-1\": \"Description\",\n    \"2-0\": \"children\",\n    \"2-1\": \"An array of the node's children.\\nEach child is an object with the same structure as the parent node.\",\n    \"1-1\": \"Will be displayed by default in the tree.\",\n    \"3-0\": \"hasChildren\",\n    \"3-1\": \"For async data load. Denotes that this node might have children, even when 'children' attr is empty.\",\n    \"4-0\": \"isExpanded\",\n    \"4-1\": \"Determines whether the node starts as expanded by default. Notice that this field is not bindable, meaning that changing it doesn't affect the tree and vice versa.\"\n  },\n  \"cols\": 2,\n  \"rows\": 5\n}\n[/block]\nExample:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"[\\n  {\\n    id: 1,\\n    name: 'root1',\\n    isExpanded: true,\\n    children: [\\n      {\\n        id: 2,\\n        name: 'child1'\\n      }, {\\n        id: 3,\\n        name: 'child2'\\n      }\\n    ]\\n  }\\n]\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"options\"\n}\n[/block]\nObject of type `ITreeOptions`.\nSee [TreeOptions](doc:options) for a complete list, or visit the Guides category for specific use cases.\n\nExample:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component';\\n\\nclass MyComponent {\\n  ...\\n\\toptions: ITreeOptions = {\\n    displayField: 'nodeName',\\n    isExpandedField: 'expanded',\\n    idField: 'uuid',\\n    actionMapping: {\\n      mouse: {\\n        dblClick: (tree, node, $event) => {\\n      \\t\\tif (node.hasChildren) TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);\\n    \\t\\t}\\n      }\\n    },\\n    nodeHeight: 23,\\n    allowDrag: (node) => {\\n      return true;\\n    },\\n    allowDrop: (node) => {\\n      return true;\\n    },\\n    useVirtualScroll: true,\\n    animateExpand: true,\\n    animateSpeed: 30,\\n    animateAcceleration: 1.2\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"focused\"\n}\n[/block]\nWhether the tree should be focused. Key navigation only works when the tree is focused.\nDefault value: false.","excerpt":"","slug":"inputs","type":"basic","title":"Input"}
Inputs to Tree component: [block:code] { "codes": [ { "code": " <tree-root [nodes]=\"nodes\" [focused]=\"true\" [options]=\"options\"></tree-root>\n", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "nodes" } [/block] Array of root nodes of the tree. Each node may contain the following fields: [block:parameters] { "data": { "0-0": "id", "0-1": "Unique ID for the node.\nIf one is not supplied it will be created by the tree library.", "1-0": "name", "h-0": "Property", "h-1": "Description", "2-0": "children", "2-1": "An array of the node's children.\nEach child is an object with the same structure as the parent node.", "1-1": "Will be displayed by default in the tree.", "3-0": "hasChildren", "3-1": "For async data load. Denotes that this node might have children, even when 'children' attr is empty.", "4-0": "isExpanded", "4-1": "Determines whether the node starts as expanded by default. Notice that this field is not bindable, meaning that changing it doesn't affect the tree and vice versa." }, "cols": 2, "rows": 5 } [/block] Example: [block:code] { "codes": [ { "code": "[\n {\n id: 1,\n name: 'root1',\n isExpanded: true,\n children: [\n {\n id: 2,\n name: 'child1'\n }, {\n id: 3,\n name: 'child2'\n }\n ]\n }\n]", "language": "json" } ] } [/block] [block:api-header] { "type": "basic", "title": "options" } [/block] Object of type `ITreeOptions`. See [TreeOptions](doc:options) for a complete list, or visit the Guides category for specific use cases. Example: [block:code] { "codes": [ { "code": "import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component';\n\nclass MyComponent {\n ...\n\toptions: ITreeOptions = {\n displayField: 'nodeName',\n isExpandedField: 'expanded',\n idField: 'uuid',\n actionMapping: {\n mouse: {\n dblClick: (tree, node, $event) => {\n \t\tif (node.hasChildren) TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);\n \t\t}\n }\n },\n nodeHeight: 23,\n allowDrag: (node) => {\n return true;\n },\n allowDrop: (node) => {\n return true;\n },\n useVirtualScroll: true,\n animateExpand: true,\n animateSpeed: 30,\n animateAcceleration: 1.2\n }\n}", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "focused" } [/block] Whether the tree should be focused. Key navigation only works when the tree is focused. Default value: false.