How to set isExpanded status of added node to true

Hey there,

I created a function that adds a node, updates the tree, does everything correctly, except by default it seems to want to not be expanded. If I try to add other nodes inside of that node, the nodes do not show up because the node is not expanded. I thought if I set isExpanded: true, then the node would automatically be expanded. I’m using angular2-tree-component 2.6.1.

Here is my function:

addSection() {
    this.items.push({
      id: 0,
      isExpanded: true,
      isSection: true,
      expanded: false,
      name: '[Section name needed]',
      children: []
    });

    // Update the tree model to reflect changes
    this.tree.treeModel.update();
  }

Do you have any thoughts?

Thanks in advance!

[adamkleingit]

Hey guys, I’m glad you solved this on your own. I was on a long sickness leave and couldn’t help.

The solution is what was proposed by @romanovma .

• change data
• call update()
• locate the node (by id, path, whatever)
• call methods on it

Basically isExpanded field is a tricky one. I only look at that field the first time the tree is rendered, or whenever async children are loaded. The state of expanded nodes is saved inside the treeModel, and not on the nodes themselves. I’m trying to avoid 2-way binding to properties of the nodes. It is not good practice to change the data that was given to the tree.

[romanovma]

@snstarosciak you should update the tree model before you use its methods which means that first run:

// Update the tree model to reflect changes
    this.list.items=[].concat(this.list.items);

and then

let createdNode: TreeNode = this.tree.treeModel.getNodeById(item.id);
    // Log to the node to see if it exists
    console.log('createdNode', createdNode);
    
    createdNode.expand();

hope that helps