Nested tree does not correctly update
See original GitHub issueBug, feature request, or proposal:
Bug
What is the expected behavior?
Adding a node to the tree and firing a change event should update the tree
What is the current behavior?
The tree does not update
What are the steps to reproduce?
StackBlitz link line 123
Open the example, and within 10 seconds expand the Applications node.
The following code should add a node, and the node should be displayed:
database.dataChange.subscribe(data => {
this.nestedDataSource.data = data;
console.log(data); // <-- see screenshot below
});
console.log('Please expand the Applications node within 10 seconds');
setTimeout(() => {
const data = this.nestedDataSource.data;
for (let node of data) {
if (node.filename == "Applications") {
const newnode = new FileNode();
newnode.filename = "ghost";
newnode.type = "gs";
node.children.push(newnode);
console.log("Added component");
}
}
// force change
console.log("Forcing change");
database.dataChange.next(data); // <-- firing event here
}, 10000);
After ten seconds the console correctly logs the added component:

But the view does not update:

What is the use-case or motivation for changing an existing behavior?
I would expect the tree to mirror the underlying data model.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
It happens on chrome, with the latest version of the library.
Is there anything else we should know?
Sorry I could not make the example autoexpand (please see #13027 on why)
Issue Analytics
- State:
- Created 5 years ago
- Reactions:5
- Comments:6
Top Results From Across the Web
Mat-tree :Tree with nested nodes adding child doesnt update ...
Bug: When using mat-nested-tree-node with a nested datasource if you add a child to an existing parent it does not update the view....
Read more >How to update nested mat-tree dynamically - Stack Overflow
I can change the data source data just fine and it is reflected in the logs, but the tree is never re-rendered this.dataSource.data...
Read more >Angular Material Nested Tree With Updates - StackBlitz
ts#L215. Therefore cdk tree updates are not triggered. when objects references stays the same. In. order to solve that properly, all objects.
Read more >Tree | Angular Material
Data source for nested tree. The data source for nested tree doesn't have to consider node flattener, or the way to expand or...
Read more >Angular Material Tree - Javatpoint
The toggle collapse serves the tree control and can extend the tree node by setting [matTreeNodeToggleRecursive] to correct. Nested trees do not require...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thanks for the feedback.
I did glance through the issue you linked before finding my way here. Incidentally I was already doing a dynamically generated trackBy return value. Basically just a concatenated string of prop names down the tree for a specific node. I think the reason it’s not working for me particularly is what you’re alluding to, my method will never change the trackBy return values since I’m not changing property names on the nodes so a difference won’t be identified. I’ll try using values of the children properties and see if that works.
@juane1000 This is the issue with solution. There’s a lot to do in order to make it work but point is to use trackBy. A point to notice, which might not be obvious, is that trackBy value should consider child nodes as well. So if you follow the example I provided, you’ll notice that I change trackBy value of a parent when Adding or Deleting. Realistically, that should be a getter function on a node that calculates it’s value like id + children.value, or something along those lines.