Maximum call stack size exceeded when using Angular Material tree from object array

Question

I am trying to visualize a tree with Angular material. The tree is built from the following object structure of Tree:

export interface Tree {
    Name: string;
    KeyName: string;
    Typ: number;
    Children?: Tree[];
}

As mat-tree is expecting an Array of objects as input in parameter dataSource, I created an array of Tree with only one element which holds the whole tree structure/data. The tree is parsed/viewed correctly until some point where I get the following message in console.

Firefox says following:

message: "1 errors occurred during unsubscription:\n1) InternalError: too much recursion"

name: "UnsubscriptionError"

Chrome says following:

Error occurred:  Maximum call stack size exceeded

My tree component:

const GetChildren = (node: Tree) => of(node.Children);
const TC = new NestedTreeControl(GetChildren);

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.scss'],
})
export class TreeComponent implements OnInit {
  tc = TC;

  tree: Tree[];

  constructor(private apiService: ApiService) {}

  ngOnInit(): void {
    this.apiService.getTree().subscribe(
    tree => this.tree = tree
    );
  }

  hasChild(_: number, node: Tree) {
    return node.Children != null && node.Children.length > 0;
  }
}

My template looks like:

<mat-tree [dataSource]="tree" [treeControl]="tc">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
  <li>
    <div>
      <button mat-icon-button disabled>
        <mat-icon>
          remove
        </mat-icon>
      </button>
      {{node.Name}} - {{node.KeyName}}
    </div>
  </li>
</mat-tree-node>

<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
  <li>
    <div class="mat-tree-node">
      <button mat-icon-button matTreeNodeToggle>
        <mat-icon>
          {{tc.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button> {{node.Name}}
    </div>
    <ul [hidden]="!tc.isExpanded(node)">
      <ng-container matTreeNodeOutlet></ng-container>
    </ul>
  </li>
</mat-nested-tree-node>

As already stated the tree is visualized correctly until some point where the error occurs. The number of all nodes and leafs in the tree is about 1625.

How can I go on to fix this issue with still using Angular material tree?

Answer 1

The answer is from following issue on github link.

You have to use flat-tree for large amount of data instead of nested-tree.

Nice to know as it is nowhere documented on official material page