{"_id":"5b65b08eb1906e000319f86b","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","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,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-12-15T22:05:57.322Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":9,"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\\n@Component {\\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]","excerpt":"","slug":"expanding-all-on-init","type":"basic","title":"Expanding nodes on init"}

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\n@Component {\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\n@Component {\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]