title: Angular material - treeview - Maximum call stack size exceeded
body: <p>I am using Angular Material TreeView but if dataSource has <strong>more than 350 items</strong> then I will get ERROR RangeError: Maximum call stack size exceeded. Sleepless night :D</p>
  
  <p>here is my code: ( mostly taken from AngularMaterial examples )</p>
  
  <pre><code>&lt;mat-tree [dataSource]="data" [treeControl]="treeControl" #tree&gt;
    &lt;mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle&gt;
      {{node[textField]}}
    &lt;/mat-tree-node&gt;
    &lt;mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren"&gt;
      &lt;li&gt;
        &lt;app-icon matTreeNodeToggle [name]="treeControl.isExpanded(node) ? 'chevron_down' : 'chevron_right'"&gt;&lt;/app-icon&gt;
        {{node[textField]}}
        &lt;ul [class.hidden]="!treeControl.isExpanded(node)"&gt;
          &lt;ng-container matTreeNodeOutlet&gt;&lt;/ng-container&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/mat-nested-tree-node&gt;
  &lt;/mat-tree&gt;
  
  
  
  export class TreeViewComponent implements OnInit {
    @Input() data: any[];
    @Input() textField: string;
    @Input() childrenField: string;
  
    treeControl: NestedTreeControl&lt;any&gt;;
    treeDataSource: MatTreeNestedDataSource&lt;any&gt;;
  
  
    constructor() {
      this.treeControl = new NestedTreeControl&lt;any&gt;(this.makeGetChildrenFunction());
      this.treeDataSource = new MatTreeNestedDataSource();
    }
  
    hasChildren = (_: number, node: any) =&gt; {
      return node[this.childrenField] &amp;&amp; node[this.childrenField].length &gt; 0;
    }
  
    private makeGetChildrenFunction() {
      return node =&gt; of(node[this.childrenField]);
    }
  
    ngOnInit(): void {
      this.treeDataSource.data = this.data;
    }
  }
  </code></pre>
  
  <p>data structure </p>
  
  <pre><code>export class TreeViewPreviewComponent {
  
      treeViewData: any[];
  
      constructor() {
          this.treeViewData = [ { text: 'Root', items: this.createRandomData(1000) } ];
        }
  
        private createRandomData(count: number): Array&lt;any&gt; {
          const result = Array(count).fill({}).map((_, index) =&gt; ({
            text: 'Item' + index,
            items: [ { text: 'SubItem' + index, items: null } ]
          })
          );
          return result;
        }
  }
  </code></pre>