Angular 6 Tree not able to load 1000000 nodes
ashish biyahut
Currently Angular tree not able to hold more than 30k nodes. For workaround I have used tree table and it was able to hold 80k nodes.
As per our requirement, we want an angular tree that can hold upto 1million nodes and it's child also.
Follow below steps to reproduce the issue:
Step 1 - Modify app.component.ts like below-
import { Component } from '@angular/core';
import { TreeNode } from 'primeng/components/common/treenode';
@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
selectedNodes: TreeNode[];
nodes: TreeNode[];
data: any;
constructor() {
this.nodes = [];
this.data = "";
}
ngOnInit() {
this.nodes = [];
this.data = "";
for (let i = 0; i < 100000; i++) {
this.nodes.push(
{
label: "Node_" + i,
data: "Backup Folder",
expandedIcon: "fa fa-folder-open",
collapsedIcon: "fa fa-folder"
});
}
}
}
Step 2- Modify app.module.ts like this
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TreeModule,TreeTableModule } from 'primeng/primeng';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
TreeModule,
TreeTableModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 3 - Modify app.component.html as below
I am using node version 10.6, angular version 6, primeng version 6
