CODEWITHSUNDEEP
angularangular-material
user15172022
user15172022

Reputation:

How to hide all children nodes in Angular tree?

I use this tree

Node model is:

interface FoodNode {
  name: string;
  children?: FoodNode[];
  childVisible?: boolean;
}

I tried to hide all children nodes if parent has childVisible as false:

<ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
    <ng-container matTreeNodeOutlet *ngIf="node.childVisible"></ng-container>
</ul>

But it does not work for me, how to hide them?

Also I have tried this:

 hasChild = (_: number, node: FoodNode) =>
    node.childVisible && !!node.children && node.children.length > 0;

Upvotes: 0

Views: 1248

Answers (1)

PLB
PLB

Reputation: 891

As I mentioned in the comment, IMHO your example works fine. Unless I did not understand what you are trying to do.

In your code you have 'childVisible: false' for Fruits, and they are hidden... now I modified it to display some more children of 'Green' but to hide the children of 'Orange'. It also works fine (don't forget that if you do not specify childVisible then it is false by default). See my stackblitz

Upvotes: 1

Related Questions