{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"Expanding nodes on init","type":"basic","slug":"expanding-all-on-init","excerpt":"","body":"A common use case is to start with the tree expanded completely.\nYou can achieve this by calling treeModel.expandAll() after view init:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tree-root #tree [nodes]=\\\"nodes\\\"></tree-root>\\n\\n:::at:::Component {\\n  nodes = [...];\\n  @ViewChild('tree') tree;\\n\\n  ngAfterViewInit() {\\n    this.tree.treeModel.expandAll();\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nOr to expand / activate specific nodes:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tree-root #tree [nodes]=\\\"nodes\\\"></tree-root>\\n\\[email protected] {\\n  nodes = [...];\\n  @ViewChild('tree') tree;\\n\\n  ngAfterViewInit() {\\n    const someNode = this.tree.treeModel.getNodeById('someId');\\n    someNode.expand();\\n           \\n    const firstRoot = this.tree.treeModel.roots[0];\\n    firstRoot.setActiveAndVisible();\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","updates":[],"order":9,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5c27be9e2b75bd0045dc746f","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Guides","slug":"documentation","order":1,"from_sync":false,"reference":false,"_id":"5c27be9e2b75bd0045dc7459","version":"5c27be9e2b75bd0045dc7476","project":"5707c6875309d117006948d4","createdAt":"2016-04-08T14:56:07.661Z","__v":0},"project":"5707c6875309d117006948d4","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":"2017-12-15T22:05:57.322Z","githubsync":"","__v":0,"parentDoc":null}

Expanding nodes on init


A common use case is to start with the tree expanded completely. You can achieve this by calling treeModel.expandAll() after view init: [block:code] { "codes": [ { "code": "<tree-root #tree [nodes]=\"nodes\"></tree-root>\n\[email protected] {\n nodes = [...];\n @ViewChild('tree') tree;\n\n ngAfterViewInit() {\n this.tree.treeModel.expandAll();\n }\n}", "language": "javascript" } ] } [/block] Or to expand / activate specific nodes: [block:code] { "codes": [ { "code": "<tree-root #tree [nodes]=\"nodes\"></tree-root>\n\[email protected] {\n nodes = [...];\n @ViewChild('tree') tree;\n\n ngAfterViewInit() {\n const someNode = this.tree.treeModel.getNodeById('someId');\n someNode.expand();\n \n const firstRoot = this.tree.treeModel.roots[0];\n firstRoot.setActiveAndVisible();\n }\n}", "language": "javascript" } ] } [/block]