Expand a specific node of an Angular Material Tree

Question

I am using Angular Material Tree and I need to expand, upon certain logic, certain nodes.

I have created an example starting from one of the examples present in the official Angular Material documentation.

At launch, the page looks like this

If i click the button Expand Fruits Node I would like to get to the following rendering

The code that manages the click of the button is the following

expandNode() {
    this.nestedNodeMap.forEach((node) => {
      if (node.item === "Fruits") {
        this.treeControl.expand(node);
      }
    });
  }

Unfortunately, if I click the button, nothing happens. Any suggestion on how to reach the desired behavior?

The example code can be tried here.

Unknown Unknown · Accepted Answer · 2019-06-17T14:10:29

Your issue is that you don't expand the parent.

The tree control only expands the given node, or the descendants of a node (to expand them all at once).

This means you have to find the parent, then expand it, then expand its child.

Here is the working stackblitz and the related code :

  if (node.item === 'Groceries') {
    console.log('parent found');
    this.treeControl.expand(node);
  }
  if (node.item === "Fruits") {
    console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>found', node);
    this.treeControl.expand(node);
  }

Expand a specific node of an Angular Material Tree

1 Answers