Styjun

I'm currently working on building a dynamic tree component with checkboxes. The idea is to expand all the descendants of a node when it is selected. I'm trying to use the expandAllDescendants() method to do so, but for some reason it only expands the first level children of the node being selected. I'm using a Map<TreeNode, TreeNode[]> to hold the tree hierarchy. It is based on this Angular Material tree with dynamic data example

I've even tried using @Viewchild() and then calling the expand(selectedNode) method in ngAfterViewInit() but this method gives me the same result as above.

Component.ts file

 selectAndExpand(treeNode: FlatTreeNode): void {
 let stack = new Stack();

 stack.pushStack(treeNode.node);
 treeNode.node.nodeSelected = !treeNode.node.nodeSelected;
 this.treeControl.expandDescendants(treeNode);

 while (stack.stack.length !== 0) 
 let removedNode = stack.popStack();
 removedNode.nodeSelected = treeNode.node.nodeSelected;

 if (this.dataSource.database.treeMap.has(removedNode)) 
 for (let child of this.dataSource.database.treeMap.get(removedNode)) 
 stack.pushStack(child);
 
 
 

HTML file

<mat-tree #tree [dataSource]="dataSource" [treeControl]="treeControl">
 <mat-tree-node *matTreeNodeDef="let treeNode" matTreeNodePadding>
 <button mat-icon-button disabled></button>
 <mat-checkbox
 class="tree-node-active"
 [checked]="treeNode.node.nodeSelected"
 (change)="selectAndExpand(treeNode)"
 color="warn"
 >
 treeNode.node.nodeName 
 </mat-checkbox>
 </mat-tree-node>

 <mat-tree-node
 *matTreeNodeDef="let treeNode; when: hasChild"
 matTreeNodePadding
 >
 <button
 class="expand-collapse-button"
 mat-icon-button
 [attr.aria-label]="'toggle ' + treeNode.node.nodeName"
 matTreeNodeToggle
 >
 <mat-icon class="mat-icon-rtl-mirror">
 
 treeControl.isExpanded(treeNode)
 ? "expand_more"
 : "chevron_right"
 
 </mat-icon>
 </button>

 <mat-checkbox
 class="tree-node-active"
 [checked]="treeNode.node.nodeSelected"
 (change)="selectAndExpand(treeNode)"
 color="warn"
 >
 treeNode.node.nodeName 
 </mat-checkbox>

 <mat-progress-bar
 *ngIf="treeNode.isLoading"
 mode="indeterminate"
 class="example-tree-progress-bar"
 ></mat-progress-bar>
 </mat-tree-node>
 </mat-tree>```