Angular material - treeview - Maximum call stack size exceeded

Question

I am using Angular Material TreeView but if dataSource has more than 350 items then I will get ERROR RangeError: Maximum call stack size exceeded. Sleepless night :D

here is my code: ( mostly taken from AngularMaterial examples )

<mat-tree [dataSource]="data" [treeControl]="treeControl" #tree>
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    {{node[textField]}}
  </mat-tree-node>
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
    <li>
      <app-icon matTreeNodeToggle [name]="treeControl.isExpanded(node) ? 'chevron_down' : 'chevron_right'"></app-icon>
      {{node[textField]}}
      <ul [class.hidden]="!treeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>



export class TreeViewComponent implements OnInit {
  @Input() data: any[];
  @Input() textField: string;
  @Input() childrenField: string;

  treeControl: NestedTreeControl<any>;
  treeDataSource: MatTreeNestedDataSource<any>;


  constructor() {
    this.treeControl = new NestedTreeControl<any>(this.makeGetChildrenFunction());
    this.treeDataSource = new MatTreeNestedDataSource();
  }

  hasChildren = (_: number, node: any) => {
    return node[this.childrenField] && node[this.childrenField].length > 0;
  }

  private makeGetChildrenFunction() {
    return node => of(node[this.childrenField]);
  }

  ngOnInit(): void {
    this.treeDataSource.data = this.data;
  }
}

data structure

export class TreeViewPreviewComponent {

    treeViewData: any[];

    constructor() {
        this.treeViewData = [ { text: 'Root', items: this.createRandomData(1000) } ];
      }

      private createRandomData(count: number): Array<any> {
        const result = Array(count).fill({}).map((_, index) => ({
          text: 'Item' + index,
          items: [ { text: 'SubItem' + index, items: null } ]
        })
        );
        return result;
      }
}

Answer 1

I had the same problem today and I was able to find my answer here https://github.com/angular/material2/issues/11602.

There is some issue with nested tree nodes and larger amounts of data. Changing the tree to a flat tree resolves the issue. There is a great example which can be found in the angular material documentation here https://material.angular.io/components/tree/overview

or stackblitz here

https://stackblitz.com/angular/bbrlnqbyxoq?file=app%2Ftree-flat-overview-example.ts

Let me know if this helps, if not let me know and I'll try to help you out.

P.S. If you have any custom properties on your nodes just modify the transformer function.