CODEWITHSUNDEEP
angularangular-material
bersling
bersling

Reputation: 19242

How can nodes in a material tree be hidden based on a condition?

I have the problem that I'd like the data.source of my material tree to include more nodes than the actual displayed tree. The reason for this is because I'd like to use the getDescendants method of the tree control, so I need those nodes to be present on the dataSource, just not displayed in the DOM to the user. How can this be achieved? I am using FlatTree.

Upvotes: 1

Views: 2658

Answers (1)

bersling
bersling

Reputation: 19242

The easiest way to do this is to introduce a new mat-tree-node element:

<mat-tree [dataSource]="dataSource"
          [treeControl]="treeControl">
  
  <mat-tree-node style="display: hidden;"
                 *matTreeNodeDef="let node; when: isHidden">
    <!-- Hidden node. -->
  </mat-tree-node>

  <!-- This is the tree node template for expandable nodes -->
  <mat-tree-node *matTreeNodeDef="let node; when: displayExpandable"
                 matTreeNodePadding>
  <!-- rest of your code -->

</mat-tree>

However, take care with the "expandable" property on the FlatTreeNodes. This property is apparently used by the getDescendants method. So in order for everything to work properly, your code will look something like this in the ts file:


  displayExpandable = (_: number, node: MyFlatTreeNode) => node.children?.some(child => !this.isHidden(_, child));

  isHidden = (_: number, node: MyFlatTreeNode) => your condition goes here;


  private _transformer = (node: MyFlatTreeNode, level: number): MyFlatTreeNode => {
    return {
      ...node,
      
      // ATTENTION: This property seems to be used by getDescendants method, so don't exclude hidden children here!
      expandable: node.children != null && node.children.length > 0,

      level: level
    };
  };

Upvotes: 1

Related Questions