{"_id":"5b65b08eb1906e000319f862","category":{"_id":"5b65b08eb1906e000319f855","version":"5b65b08eb1906e000319f872","project":"5707c6875309d117006948d4","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-04-08T14:56:07.661Z","from_sync":false,"order":1,"slug":"documentation","title":"Guides"},"project":"5707c6875309d117006948d4","parentDoc":null,"user":"54d742a80771980d0052f4b5","version":{"_id":"5b65b08eb1906e000319f872","project":"5707c6875309d117006948d4","__v":0,"forked_from":"5aff027686c0a90003b923b4","createdAt":"2018-03-23T13:06:33.352Z","releaseDate":"2018-03-23T13:06:33.352Z","categories":["5b65b08eb1906e000319f854","5b65b08eb1906e000319f855","5b65b08eb1906e000319f856"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"8.0.0","version":"8.0.0"},"githubsync":"","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-02-15T13:25:34.307Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"The tree allows to load children asynchronously using `getChildren` option, and `hasChildren` field on the node.\n[block:api-header]\n{\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/#/async\\\" width=\\\"100%\\\" height=\\\"350px\\\"></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/async/async.component.ts\\\" target=\\\"_blank\\\">Source code for this demo</a>\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"'getChildren' option:\"\n}\n[/block]\nThis options receives a function that has a TreeNode parameter, and returns a value or a promise that resolves to the node's children:\n```\n(node:TreeNode) => TreeNode[] | Promise<TreeNode[]>\n```\n\nThe function will be called whenever a node is expanded, the `hasChildren` field is true, and the `children` field is empty.\nThe result will be loaded into the node's children attribute.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Example:\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"options = {\\n  getChildren: (node:TreeNode) => {\\n    return request('/api/children/' + node.id);\\n  }\\n}\\n\\nnodes = [\\n  {\\n    name: 'asyncRoot',\\n    hasChildren: true\\n  },\\n  {\\n    name: 'root2',\\n    children: [\\n      {\\n        name: 'leaf',\\n        hasChildren: false\\n      }\\n    ]\\n  }\\n]\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"async-data-1","type":"basic","title":"Async Data"}
The tree allows to load children asynchronously using `getChildren` option, and `hasChildren` field on the node. [block:api-header] { "title": "Demo" } [/block] [block:html] { "html": "<iframe src=\"https://rawgit.com/500tech/angular-tree-component/master/example/cli/dist/#/async\" width=\"100%\" height=\"350px\"></iframe>\n" } [/block] [block:html] { "html": "<a href=\"https://github.com/500tech/angular-tree-component/blob/master/example/cli/src/app/async/async.component.ts\" target=\"_blank\">Source code for this demo</a>" } [/block] [block:api-header] { "type": "basic", "title": "'getChildren' option:" } [/block] This options receives a function that has a TreeNode parameter, and returns a value or a promise that resolves to the node's children: ``` (node:TreeNode) => TreeNode[] | Promise<TreeNode[]> ``` The function will be called whenever a node is expanded, the `hasChildren` field is true, and the `children` field is empty. The result will be loaded into the node's children attribute. [block:api-header] { "type": "basic", "title": "Example:" } [/block] [block:code] { "codes": [ { "code": "options = {\n getChildren: (node:TreeNode) => {\n return request('/api/children/' + node.id);\n }\n}\n\nnodes = [\n {\n name: 'asyncRoot',\n hasChildren: true\n },\n {\n name: 'root2',\n children: [\n {\n name: 'leaf',\n hasChildren: false\n }\n ]\n }\n]\n", "language": "javascript" } ] } [/block]