diff --git a/src/app/components/treeselect/treeselect.ts b/src/app/components/treeselect/treeselect.ts index 282fb372005..fa0a2ac8283 100755 --- a/src/app/components/treeselect/treeselect.ts +++ b/src/app/components/treeselect/treeselect.ts @@ -170,6 +170,7 @@ export const TREESELECT_VALUE_ACCESSOR: any = { [virtualScrollItemSize]="virtualScrollItemSize" [virtualScrollOptions]="virtualScrollOptions" [_templateMap]="templateMap" + [loading]="loading" > @@ -425,6 +426,11 @@ export class TreeSelect implements AfterContentInit { this._hideTransitionOptions = val; console.warn('The hideTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.'); } + /** + * Displays a loader to indicate data load is in progress. + * @group Props + */ + @Input({ transform: booleanAttribute }) loading: boolean | undefined; /** * Callback to invoke when a node is expanded. * @param {TreeSelectNodeExpandEvent} event - Custom node expand event. diff --git a/src/app/showcase/doc/treeselect/lazydoc.ts b/src/app/showcase/doc/treeselect/lazydoc.ts new file mode 100644 index 00000000000..75d4d68a3cd --- /dev/null +++ b/src/app/showcase/doc/treeselect/lazydoc.ts @@ -0,0 +1,228 @@ +import { ChangeDetectorRef, Component } from '@angular/core'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; +import { TreeNode } from 'primeng/api'; + +@Component({ + selector: 'lazy-doc', + template: ` + +

Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using loading property and onNodeExpand method.

+
+
+ +
+ + ` +}) +export class LazyDoc { + selectedNodes: TreeNode[] = []; + + nodes!: TreeNode[]; + + loading: boolean = false; + + constructor(private cd: ChangeDetectorRef) {} + + ngOnInit() { + this.loading = true; + + setTimeout(() => { + this.nodes = this.initiateNodes(); + this.loading = false; + this.cd.markForCheck(); + }, 2000); + } + + initiateNodes(): TreeNode[] { + return [ + { + key: '0', + label: 'Node 0', + leaf: false + }, + { + key: '1', + label: 'Node 1', + leaf: false + }, + { + key: '2', + label: 'Node 2', + leaf: false + } + ]; + } + + onNodeExpand(event: any) { + if (!event.node.children) { + this.loading = true; + + setTimeout(() => { + let _node = { ...event.node }; + _node.children = []; + + for (let i = 0; i < 1500; i++) { + _node.children.push({ + key: event.node.key + '-' + i, + label: 'Lazy ' + event.node.label + '-' + i + }); + } + + this.nodes[parseInt(event.node.key, 10)] = _node; + + this.loading = false; + this.cd.markForCheck(); + }, 500); + } + } + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: `import { Component } from '@angular/core'; +import { NodeService } from '@service/nodeservice'; +import { FormsModule } from '@angular/forms'; +import { TreeSelectModule } from 'primeng/treeselect'; + +@Component({ + selector: 'tree-select-lazy-demo', + templateUrl: './tree-select-lazy-demo.html', + standalone: true, + imports: [FormsModule, TreeSelectModule] + }) +export class TreeSelectLazyDemo { + selectedNodes: TreeNode[] = []; + + nodes!: TreeNode[]; + + loading: boolean = false; + + constructor(private cd: ChangeDetectorRef) {} + + ngOnInit() { + this.loading = true; + + setTimeout(() => { + this.nodes = this.initiateNodes(); + this.loading = false; + this.cd.markForCheck(); + }, 2000); + } + + initiateNodes(): TreeNode[] { + return [ + { + key: '0', + label: 'Node 0', + leaf: false + }, + { + key: '1', + label: 'Node 1', + leaf: false + }, + { + key: '2', + label: 'Node 2', + leaf: false + } + ]; + } + + onNodeExpand(event: any) { + if (!event.node.children) { + this.loading = true; + + setTimeout(() => { + let _node = { ...event.node }; + _node.children = []; + + for (let i = 0; i < 150; i++) { + _node.children.push({ + key: event.node.key + '-' + i, + label: 'Lazy ' + event.node.label + '-' + i + }); + } + + this.nodes[parseInt(event.node.key, 10)] = _node; + + this.loading = false; + this.cd.markForCheck(); + }, 500); + } + } +}`, + + service: ['NodeService'], + + data: ` + /* NodeService */ +{ + key: '0', + label: 'Documents', + data: 'Documents Folder', + icon: 'pi pi-fw pi-inbox', + children: [ + { + key: '0-0', + label: 'Work', + data: 'Work Folder', + icon: 'pi pi-fw pi-cog', + children: [ + { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' }, + { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' } + ] + }, + { + key: '0-1', + label: 'Home', + data: 'Home Folder', + icon: 'pi pi-fw pi-home', + children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }] + } + ] +}, +...` + }; +} diff --git a/src/app/showcase/doc/treeselect/treeselectdoc.module.ts b/src/app/showcase/doc/treeselect/treeselectdoc.module.ts index 02c68e9035e..e0cf8e3e397 100644 --- a/src/app/showcase/doc/treeselect/treeselectdoc.module.ts +++ b/src/app/showcase/doc/treeselect/treeselectdoc.module.ts @@ -19,10 +19,11 @@ import { StyleDoc } from './styledoc'; import { VirtualScrollDoc } from './virtualscrolldoc'; import { FloatLabelModule } from 'primeng/floatlabel'; import { FilledDoc } from './filleddoc'; +import { LazyDoc } from './lazydoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, TreeSelectModule, FormsModule, ReactiveFormsModule, RouterModule, FloatLabelModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, MultipleDoc, CheckboxDoc, VirtualScrollDoc, FilterDoc, FloatLabelDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, FilledDoc] + declarations: [ImportDoc, BasicDoc, MultipleDoc, CheckboxDoc, LazyDoc, VirtualScrollDoc, FilterDoc, FloatLabelDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, FilledDoc] }) export class TreeSelectDocModule {} diff --git a/src/app/showcase/pages/treeselect/treeselectdemo.ts b/src/app/showcase/pages/treeselect/treeselectdemo.ts index 3264c971760..a060b433a42 100644 --- a/src/app/showcase/pages/treeselect/treeselectdemo.ts +++ b/src/app/showcase/pages/treeselect/treeselectdemo.ts @@ -12,6 +12,7 @@ import { MultipleDoc } from '@doc/treeselect/multipledoc'; import { StyleDoc } from '@doc/treeselect/styledoc'; import { VirtualScrollDoc } from '@doc/treeselect/virtualscrolldoc'; import { FilledDoc } from '@doc/treeselect/filleddoc'; +import { LazyDoc } from '@doc/treeselect/lazydoc'; @Component({ templateUrl: './treeselectdemo.html' @@ -48,6 +49,11 @@ export class TreeSelectDemo { label: 'Virtual Scroll', component: VirtualScrollDoc }, + { + id: 'lazy', + label: 'Lazy', + component: LazyDoc + }, { id: 'filter', label: 'Filter',