79498946

Date: 2025-03-10 19:14:50
Score: 2
Natty:
Report link

After some time I have found something (please tell me if my response needs to be worked on). To resume, you need to plug to [isExpanded] input now.

<mat-tree [dataSource]="yourTreeData()" [childrenAccessor]="yourChildrenAccessor">
    <mat-tree-node
        *matTreeNodeDef="let node"
        matTreeNodePadding
        matTreeNodeToggle
        [cdkTreeNodeTypeheadLabel]="node.name"
        (click)="youSelectNodeOnClick(node)"
        (expandedChange)="youDoSomethingWhenExpanded($event, node)"
        [isExpandable]="node.isExpandable"
        [isExpanded]="node.isExpanded">
        
    </mat-tree-node>
</mat-tree>

with this in your component:

private _cdr = inject(ChangeDetectorRef);
protected yourTreeData: Signal<Array<TreeNode>>; // for each tree node you need to declare the toggleExpanded(expend: boolean, currentNode: TreeNode) method with: currentNode.isExpanded = expend;
protected yourChildrenAccessor = (node: TreeNode): Array<TreeNode> => {
  return node.children; // you can filter if you want
}

// and where you have the node you want to expand then:
let yourNode: TreeNode; // the node you have
elem.toggleExpanded(true, elem); // this triggers the previous declared method in the yourTreeData
this._cdr.detectChanges();
Reasons:
  • RegEx Blacklisted phrase (2.5): please tell me
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Killian