{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","settings":"","results":{"codes":[]},"params":[]},"next":{"description":"","pages":[]},"title":"Calling API Methods","type":"basic","slug":"calling-methods-on-the-tree","excerpt":"","body":"You can access the tree API by using the `treeModel` attribute on the element:\n[block:api-header]\n{\n  \"title\": \"Demo\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<iframe src=\\\"https://angular-tree-component.azurewebsites.net/#/api\\\" width=\\\"100%\\\" height=\\\"400px\\\"></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/api/api.component.ts\\\" target=\\\"_blank\\\">Source code for this demo</a>\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\t<tree-root #tree [nodes]=\\\"nodes\\\"></tree-root>\\n\\n  <button (click)=\\\"tree.treeModel.focusNextNode()\\\">next node</button>\\n  <button (click)=\\\"tree.treeModel.focusPreviousNode()\\\">previous node</button>\\n  <button (click)=\\\"tree.treeModel.focusDrillDown()\\\">drill down</button>\\n  <button (click)=\\\"tree.treeModel.focusDrillUp()\\\">drill up</button>\\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nOr by accessing the treeNode that is passed through [Events](doc:events) or using [Action Mapping](doc:action-mapping).\n\nYou can find the complete API for TreeModel here:\n[TreeModel](doc:treemodel) \n\nAnd the complete API for TreeNode here:\n[TreeNode](doc:api)","updates":[],"order":7,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5c27be9e2b75bd0045dc7462","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","user":"54d742a80771980d0052f4b5","parentDoc":null,"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":"2017-07-15T07:33:00.256Z","githubsync":"","__v":0}

Calling API Methods


You can access the tree API by using the `treeModel` attribute on the element: [block:api-header] { "title": "Demo" } [/block] [block:html] { "html": "<iframe src=\"https://angular-tree-component.azurewebsites.net/#/api\" width=\"100%\" height=\"400px\"></iframe>\n" } [/block] [block:html] { "html": "<a href=\"https://github.com/CirclonGroup/angular-tree-component/blob/master/projects/example-app/src/app/api/api.component.ts\" target=\"_blank\">Source code for this demo</a>" } [/block] [block:code] { "codes": [ { "code": "\t<tree-root #tree [nodes]=\"nodes\"></tree-root>\n\n <button (click)=\"tree.treeModel.focusNextNode()\">next node</button>\n <button (click)=\"tree.treeModel.focusPreviousNode()\">previous node</button>\n <button (click)=\"tree.treeModel.focusDrillDown()\">drill down</button>\n <button (click)=\"tree.treeModel.focusDrillUp()\">drill up</button>\n", "language": "html" } ] } [/block] Or by accessing the treeNode that is passed through [Events](doc:events) or using [Action Mapping](doc:action-mapping). You can find the complete API for TreeModel here: [TreeModel](doc:treemodel) And the complete API for TreeNode here: [TreeNode](doc:api)