{"_id":"598622fad09433000f1b97f2","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"},"user":"54d742a80771980d0052f4b5","project":"5707c6875309d117006948d4","parentDoc":null,"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":[],"next":{"pages":[],"description":""},"createdAt":"2016-08-06T18:14:51.698Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Changing node attributes\"\n}\n[/block]\nChanging any attributes on the node itself will be reflected immediately, since change detection will force the tree node components to re-render.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Adding / Removing nodes\"\n}\n[/block]\nAfter adding or removing nodes from the tree, one must call the `update` method on the treeModel for it to take affect.\n\nFor example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tree-root #tree nodes=\\\"nodes\\\"></tree-root>\\n\\nclass MyComponent {\\n  nodes = [{ name: 'node' }];\\n\\n  :::at:::ViewChild(TreeComponent)\\n  private tree: TreeComponent;\\n\\n  addNode() {\\n    this.nodes.push({ name: 'another node' });\\n    this.tree.treeModel.update();\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis is due to the fact that the treeModel builds its own model around the nodes data, to calculate node levels, paths, parent links etc. So it must be informed of any change to the nodes' structure.\n\nCalling update will have no effect on the tree status, i.e. current selected node, current focused node, current expanded nodes, etc.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Changing the reference to nodes\"\n}\n[/block]\nChanging the reference to nodes will also trigger an `update` automatically. So if you work for example with immutable data and replace the nodes array instead of mutating it - there is no need to call any method.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tree-root nodes=\\\"nodes\\\"></tree-root>\\n\\nnodes = [...]\\n\\naddNode(newNode) {\\n  // Just add node and replace nodes variable:\\n  this.nodes = [...this.nodes, newNode];\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"changing-the-tree","type":"basic","title":"Dynamically changing the tree"}

Dynamically changing the tree


[block:api-header] { "type": "basic", "title": "Changing node attributes" } [/block] Changing any attributes on the node itself will be reflected immediately, since change detection will force the tree node components to re-render. [block:api-header] { "type": "basic", "title": "Adding / Removing nodes" } [/block] After adding or removing nodes from the tree, one must call the `update` method on the treeModel for it to take affect. For example: [block:code] { "codes": [ { "code": "<tree-root #tree nodes=\"nodes\"></tree-root>\n\nclass MyComponent {\n nodes = [{ name: 'node' }];\n\n @ViewChild(TreeComponent)\n private tree: TreeComponent;\n\n addNode() {\n this.nodes.push({ name: 'another node' });\n this.tree.treeModel.update();\n }\n}", "language": "javascript" } ] } [/block] This is due to the fact that the treeModel builds its own model around the nodes data, to calculate node levels, paths, parent links etc. So it must be informed of any change to the nodes' structure. Calling update will have no effect on the tree status, i.e. current selected node, current focused node, current expanded nodes, etc. [block:api-header] { "type": "basic", "title": "Changing the reference to nodes" } [/block] Changing the reference to nodes will also trigger an `update` automatically. So if you work for example with immutable data and replace the nodes array instead of mutating it - there is no need to call any method. [block:code] { "codes": [ { "code": "<tree-root nodes=\"nodes\"></tree-root>\n\nnodes = [...]\n\naddNode(newNode) {\n // Just add node and replace nodes variable:\n this.nodes = [...this.nodes, newNode];\n}", "language": "javascript" } ] } [/block]