Angular 6 Material Nested Tree is not working with dynamic data

Question

I am using mat-tree with mat-nested-tree-node in Angular 6. What I want is to load the data dynamically when the user toggles expand icon.

Using the dynamic data example of Flat Tree given in Material Examples I have tried to use the same concept for Nested Tree. This is what I have tried so far https://stackblitz.com/edit/angular-naarcp

But it only shows the data which was prepopulated in the data array although in the console it is clear that data is getting updated but it never gets shown on the UI.

It recursively calls the _getChildren method for the nodes parent, child1, child2, child3 because this is initial data. I am adding My Child in child1 and child3 when user expands it but the added node is never shown.

I can not add dynamic children in _getChildren because it gets called recursively till last node.

Note:

I dont want to use Flat tree because it manages everything in single array and updating the single array gets really difficult in asynchronous loading of data

Help

Is there anything I am missing or nested trees are designed to work this way?

im running into the very same issue were you able to solve this? — Alvaromon
– Alvaromon, Commented Aug 28, 2018 at 20:54
@Alvaromon No. I used FlatTreeControl with dynamic data as mentioned in material.angular.io/components/tree/examples — Yousef khan
– Yousef khan, Commented Aug 29, 2018 at 3:02
I have the same issue as well. I am still working on finding a way. I'll post if I find a solution — Geo242
– Geo242, Commented Oct 11, 2018 at 5:33

Craig · Accepted Answer · 2018-10-29 22:10:56Z

2

I struggled when I implemented back when it first came out and found the UI wasnt updating because changes to an objects's properties do not get picked up by change detection. Please read through my original question and answer here. It is for a flattened tree but might save you hours of banging your head.

Why is my angular app becoming very slow after changing the data backing a mat-tree?

answered Oct 29, 2018 at 22:10

Craig

1,8063 gold badges23 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 6 Material Nested Tree is not working with dynamic data

Note:

Help

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Note:

Help

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related