Description
Feature Description
There is a method for adding a node, insertNode()
, but there is no method for deleting.
At the moment this can only be done by completely reinitializing the `data' object that is passed to the mat tree.
Use Case
One use case is in which there is a tree that can be modified by the user by adding and deleting nodes, without changing the state of the existing nodes.
For example, if the user expands the nodes and then wants to delete one of them, currently this can be implemented by saving the open nodes in a separate state, re-initializing the dataSource.data
object after the desired node has been deleted and then restoring the open nodes .
saveExpandedNodes() {
this.#expandedNodes.splice(0, this.#expandedNodes.length);
this.treeControl.dataNodes.forEach(node => {
if (node.expandable && this.treeControl.isExpanded(node)) {
this.#expandedNodes.push(node);
}
});
}
restoreExpandedNodes() {
this.#expandedNodes.forEach(node => {
const treeNode = this.treeControl.dataNodes.find(n => n.id === node.id);
treeNode && this.treeControl.expand(treeNode);
});
}
Usage:
this.saveExpandedNodes()
this.dataSource.data = this.dataSource.splice(0,1)
this.restoreExpandedNodes()
This works ok for cases where the tree does not have many elements, but if there are dozens of nodes then this process takes from a few milliseconds to a few seconds, which does not lead to a very pleasant experience.