diff --git a/src/app/showcase/doc/tree/virtualscrolldoc.ts b/src/app/showcase/doc/tree/virtualscrolldoc.ts
index 76f6b970e29..3655c67a59a 100644
--- a/src/app/showcase/doc/tree/virtualscrolldoc.ts
+++ b/src/app/showcase/doc/tree/virtualscrolldoc.ts
@@ -46,14 +46,15 @@ export class VirtualScrollDoc implements OnInit {
 </div>`,
 
         typescript: `
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { TreeNode } from 'primeng/api';
+import { NodeService } from '../../service/nodeservice';
 
 @Component({
-    selector: 'tree-template-demo',
-    templateUrl: './tree-template-demo.html'
+    selector: 'tree-virtual-scroll-demo',
+    templateUrl: './tree-virtual-scroll-demo.html'
 })
-export class TreeTemplateDemo implements OnInit {
+export class TreeVirtualScrollDemo implements OnInit {
     loading: boolean = false;
 
     files!: TreeNode[];
@@ -75,6 +76,36 @@ export class TreeTemplateDemo implements OnInit {
         return duplicatedData;
     }
 
-}`
+}`,
+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/tree/virtualscrolllazydoc.ts b/src/app/showcase/doc/tree/virtualscrolllazydoc.ts
index aaaf72e72b2..6fde95d7ca0 100644
--- a/src/app/showcase/doc/tree/virtualscrolllazydoc.ts
+++ b/src/app/showcase/doc/tree/virtualscrolllazydoc.ts
@@ -63,14 +63,15 @@ export class LazyVirtualScrollDoc implements OnInit {
 </div>`,
 
         typescript: `
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { TreeNode } from 'primeng/api';
+import { NodeService } from '../../service/nodeservice';
 
 @Component({
-    selector: 'tree-template-demo',
-    templateUrl: './tree-template-demo.html'
+    selector: 'tree-virtual-scroll-lazy-demo',
+    templateUrl: './tree-virtual-scroll-lazy-demo.html'
 })
-export class TreeTemplateDemo implements OnInit {
+export class TreeVirtualScrollLazyDemo implements OnInit {
     loading: boolean = false;
 
     files!: TreeNode[];
@@ -109,6 +110,36 @@ export class TreeTemplateDemo implements OnInit {
             }, 200);
         }
     }
-}`
+}`,
+        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' }]
+        }
+    ]
+},
+...`
     };
 }