Dynamically changing the tree

Changing node attributes

Changing any attributes on the node itself will be reflected immediately, since change detection will force the tree node components to re-render.

Adding / Removing nodes

After adding or removing nodes from the tree, one must call the update method on the treeModel for it to take affect.

For example:

JavaScript

<tree-root #tree nodes="nodes"></tree-root>

@ViewChild(TreeComponent)
private tree: TreeComponent;

addNode() {
  // add node, then:
  this.tree.treeModel.update()
}

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.

Changing the reference to nodes

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.

JavaScript

<tree-root nodes="nodes"></tree-root>

nodes = [...]

addNode(newNode) {
  // Just add node and replace nodes variable:
  this.nodes = [...this.nodes, newNode];
}