-
-
-
- `
-})
-export class BasicDoc {
- code: Code = {
- basic: ``,
-
- html: `
-
-
-
`,
-
- typescript: `
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'tooltip-basic-demo',
- templateUrl: './tooltip-basic-demo.html'
-})
-export class TooltipBasicDemo {}`
- };
-}
diff --git a/src/app/showcase/doc/tooltip/tooltipdoc.module.ts b/src/app/showcase/doc/tooltip/tooltipdoc.module.ts
index f570b2b61f4..feee13b7683 100644
--- a/src/app/showcase/doc/tooltip/tooltipdoc.module.ts
+++ b/src/app/showcase/doc/tooltip/tooltipdoc.module.ts
@@ -6,7 +6,6 @@ import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { AppDocModule } from '@layout/doc/app.doc.module';
import { AppCodeModule } from '@layout/doc/app.code.component';
-import { BasicDoc } from './basicdoc';
import { ImportDoc } from './importdoc';
import { StyleDoc } from './styledoc';
import { PositionDoc } from './positiondoc';
@@ -19,7 +18,7 @@ import { CustomDoc } from './customdoc';
@NgModule({
imports: [CommonModule, AppCodeModule, RouterModule, TooltipModule, ButtonModule, InputTextModule, AppDocModule],
- declarations: [BasicDoc, ImportDoc, StyleDoc, PositionDoc, EventDoc, AutoHideDoc, DelayDoc, CustomDoc, OptionsDoc, AccessibilityDoc],
+ declarations: [ImportDoc, StyleDoc, PositionDoc, EventDoc, AutoHideDoc, DelayDoc, CustomDoc, OptionsDoc, AccessibilityDoc],
exports: [AppDocModule]
})
export class TooltipDocModule {}
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/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts
index 8d5a3fb4545..35ac185a174 100644
--- a/src/app/showcase/layout/doc/codeeditor/templates.ts
+++ b/src/app/showcase/layout/doc/codeeditor/templates.ts
@@ -15,7 +15,7 @@ export interface Props {
const app_dependencies = pkg ? pkg.devDependencies : {};
const PrimeNG = {
- version: '17.16.1',
+ version: '17.17.0',
description:
'PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.'
};
diff --git a/src/app/showcase/pages/tooltip/tooltipdemo.ts b/src/app/showcase/pages/tooltip/tooltipdemo.ts
index 0aa9c50722c..805a41cd88a 100755
--- a/src/app/showcase/pages/tooltip/tooltipdemo.ts
+++ b/src/app/showcase/pages/tooltip/tooltipdemo.ts
@@ -1,5 +1,4 @@
import { Component } from '@angular/core';
-import { BasicDoc } from '@doc/tooltip/basicdoc';
import { ImportDoc } from '@doc/tooltip/importdoc';
import { StyleDoc } from '@doc/tooltip/styledoc';
import { PositionDoc } from '@doc/tooltip/positiondoc';
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',