diff --git a/src/app/showcase/doc/carousel/basicdoc.ts b/src/app/showcase/doc/carousel/basicdoc.ts
index 57888bdd99b..54fc2190bae 100644
--- a/src/app/showcase/doc/carousel/basicdoc.ts
+++ b/src/app/showcase/doc/carousel/basicdoc.ts
@@ -20,9 +20,9 @@ import { ProductService } from '../../service/productservice';
                             <h4 class="mb-1">{{ product.name }}</h4>
                             <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
                             <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                            <div class="car-buttons mt-5">
-                                <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                                <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
+                            <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                                <p-button icon="pi pi-search" [rounded]="true" />
+                                <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
                             </div>
                         </div>
                     </div>
@@ -86,16 +86,15 @@ export class BasicDoc implements OnInit {
                 <h4 class="mb-1">{{ product.name }}</h4>
                 <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
                 <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                <div class="car-buttons mt-5">
-                    <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                    <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
+                <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                    <p-button icon="pi pi-search" [rounded]="true" />
+                    <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
                 </div>
             </div>
         </div>
     </ng-template>
 </p-carousel>`,
-        html: `
-<div class="card">
+        html: `<div class="card">
     <p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="responsiveOptions">
         <ng-template let-product pTemplate="item">
             <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
@@ -106,10 +105,10 @@ export class BasicDoc implements OnInit {
                     <h4 class="mb-1">{{ product.name }}</h4>
                     <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
                     <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                    <div class="car-buttons mt-5">
-                        <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                        <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
-                    </div>
+                    <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                    <p-button icon="pi pi-search" [rounded]="true" />
+                    <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
+                </div>
                 </div>
             </div>
         </ng-template>
diff --git a/src/app/showcase/doc/carousel/circulardoc.ts b/src/app/showcase/doc/carousel/circulardoc.ts
index e2a8c60af95..b592738acc1 100644
--- a/src/app/showcase/doc/carousel/circulardoc.ts
+++ b/src/app/showcase/doc/carousel/circulardoc.ts
@@ -20,9 +20,9 @@ import { ProductService } from '../../service/productservice';
                             <h4 class="mb-1">{{ product.name }}</h4>
                             <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
                             <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                            <div class="car-buttons mt-5">
-                                <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                                <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
+                            <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                                <p-button icon="pi pi-search" [rounded]="true" />
+                                <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
                             </div>
                         </div>
                     </div>
@@ -86,16 +86,15 @@ export class CircularDoc implements OnInit {
                 <h4 class="mb-1">{{ product.name }}</h4>
                 <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
                 <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                <div class="car-buttons mt-5">
-                    <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                    <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
-                </div>
+                <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                <p-button icon="pi pi-search" [rounded]="true" />
+                <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
+            </div>
             </div>
         </div>
     </ng-template>
 </p-carousel>`,
-        html: `
-<div class="card">
+        html: `<div class="card">
     <p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="true" [responsiveOptions]="responsiveOptions" autoplayInterval="3000">
         <ng-template let-product pTemplate="item">
             <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
@@ -106,10 +105,10 @@ export class CircularDoc implements OnInit {
                     <h4 class="mb-1">{{ product.name }}</h4>
                     <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
                     <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                    <div class="car-buttons mt-5">
-                        <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                        <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
-                    </div>
+                    <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                    <p-button icon="pi pi-search" [rounded]="true" />
+                    <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
+                </div>
                 </div>
             </div>
         </ng-template>
diff --git a/src/app/showcase/doc/carousel/numscrolldoc.ts b/src/app/showcase/doc/carousel/numscrolldoc.ts
index fbf6166d945..34c43bfb0f7 100644
--- a/src/app/showcase/doc/carousel/numscrolldoc.ts
+++ b/src/app/showcase/doc/carousel/numscrolldoc.ts
@@ -20,9 +20,9 @@ import { ProductService } from '../../service/productservice';
                             <h4 class="mb-1">{{ product.name }}</h4>
                             <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
                             <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                            <div class="car-buttons mt-5">
-                                <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                                <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
+                            <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                                <p-button icon="pi pi-search" [rounded]="true" />
+                                <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
                             </div>
                         </div>
                     </div>
@@ -86,16 +86,15 @@ export class NumScrollDoc implements OnInit {
                 <h4 class="mb-1">{{ product.name }}</h4>
                 <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
                 <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                <div class="car-buttons mt-5">
-                    <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                    <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
-                </div>
+                <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                <p-button icon="pi pi-search" [rounded]="true" />
+                <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
+            </div>
             </div>
         </div>
     </ng-template>
 </p-carousel>`,
-        html: `
-<div class="card">
+        html: `<div class="card">
     <p-carousel [value]="products" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsiveOptions">
         <ng-template let-product pTemplate="item">
             <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
@@ -106,10 +105,10 @@ export class NumScrollDoc implements OnInit {
                     <h4 class="mb-1">{{ product.name }}</h4>
                     <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
                     <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                    <div class="car-buttons mt-5">
-                        <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                        <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
-                    </div>
+                    <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                    <p-button icon="pi pi-search" [rounded]="true" />
+                    <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
+                </div>
                 </div>
             </div>
         </ng-template>
diff --git a/src/app/showcase/doc/carousel/responsivedoc.ts b/src/app/showcase/doc/carousel/responsivedoc.ts
index 7d7df97282e..d77d4109108 100644
--- a/src/app/showcase/doc/carousel/responsivedoc.ts
+++ b/src/app/showcase/doc/carousel/responsivedoc.ts
@@ -25,9 +25,9 @@ import { ProductService } from '../../service/productservice';
                                 <h4 class="mb-1">{{ product.name }}</h4>
                                 <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
                                 <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                                <div class="car-buttons mt-5">
-                                    <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                                    <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
+                                <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                                    <p-button icon="pi pi-search" [rounded]="true" />
+                                    <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
                                 </div>
                             </div>
                         </div>
@@ -93,17 +93,16 @@ export class ResponsiveDoc implements OnInit {
                     <h4 class="mb-1">{{ product.name }}</h4>
                     <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
                     <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                    <div class="car-buttons mt-5">
-                        <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                        <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
-                    </div>
+                    <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                    <p-button icon="pi pi-search" [rounded]="true" />
+                    <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
+                </div>
                 </div>
             </div>
         </div>
     </ng-template>
 </p-carousel>`,
-        html: `
-<div class="card">
+        html: `<div class="card">
     <p-carousel [value]="products" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsiveOptions">
         <ng-template let-product pTemplate="item">
             <div class="product-item">
@@ -115,10 +114,10 @@ export class ResponsiveDoc implements OnInit {
                         <h4 class="mb-1">{{ product.name }}</h4>
                         <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
                         <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                        <div class="car-buttons mt-5">
-                            <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                            <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
-                        </div>
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                        <p-button icon="pi pi-search" [rounded]="true" />
+                        <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
+                    </div>
                     </div>
                 </div>
             </div>
diff --git a/src/app/showcase/doc/carousel/templatedoc.ts b/src/app/showcase/doc/carousel/templatedoc.ts
index 92ff8687e7b..fe1feb964fc 100644
--- a/src/app/showcase/doc/carousel/templatedoc.ts
+++ b/src/app/showcase/doc/carousel/templatedoc.ts
@@ -23,9 +23,9 @@ import { ProductService } from '../../service/productservice';
                             <h4 class="mb-1">{{ product.name }}</h4>
                             <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
                             <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                            <div class="car-buttons mt-5">
-                                <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                                <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
+                            <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                                <p-button icon="pi pi-search" [rounded]="true" />
+                                <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
                             </div>
                         </div>
                     </div>
@@ -87,20 +87,17 @@ export class TemplateDoc implements OnInit {
         <p>Header content</p>
     </ng-template>
     <ng-template let-product pTemplate="item">
-        <div class="product-item">
-            <div class="product-item-content">
-                <div class="mb-3">
-                    <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="product-image" />
-                </div>
-                <div>
-                    <h4 class="mb-1">{{ product.name }}</h4>
-                    <h6 class="mt-0 mb-3">{{ product.price }}</h6>
-                    <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                    <div class="car-buttons mt-5">
-                        <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                        <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
-                        <p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"></p-button>
-                    </div>
+        <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+            <div class="mb-3">
+                <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-6 shadow-2" />
+            </div>
+            <div>
+                <h4 class="mb-1">{{ product.name }}</h4>
+                <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
+                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
+                <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                    <p-button icon="pi pi-search" [rounded]="true" />
+                    <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
                 </div>
             </div>
         </div>
@@ -109,35 +106,31 @@ export class TemplateDoc implements OnInit {
         <p>Footer content</p>
     </ng-template>
 </p-carousel>`,
-        html: `
-<div class="card">
-    <p-carousel [value]="products" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsiveOptions">
-        <ng-template pTemplate="header">
-            <p>Header content</p>
-        </ng-template>
-        <ng-template let-product pTemplate="item">
-            <div class="product-item">
-                <div class="product-item-content">
-                    <div class="mb-3">
-                        <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="product-image" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ product.name }}</h4>
-                        <h6 class="mt-0 mb-3">{{ product.price }}</h6>
-                        <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                        <div class="car-buttons mt-5">
-                            <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                            <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
-                            <p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"></p-button>
-                        </div>
-                    </div>
-                </div>
+        html: `<div class="card">
+<p-carousel [value]="products" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsiveOptions">
+<ng-template pTemplate="header">
+    <p>Header content</p>
+</ng-template>
+<ng-template let-product pTemplate="item">
+    <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+        <div class="mb-3">
+            <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-6 shadow-2" />
+        </div>
+        <div>
+            <h4 class="mb-1">{{ product.name }}</h4>
+            <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
+            <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
+            <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                <p-button icon="pi pi-search" [rounded]="true" />
+                <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
             </div>
-        </ng-template>
-        <ng-template pTemplate="footer">
-            <p>Footer content</p>
-        </ng-template>
-    </p-carousel>
+        </div>
+    </div>
+</ng-template>
+<ng-template pTemplate="footer">
+    <p>Footer content</p>
+</ng-template>
+</p-carousel>
 </div>`,
         typescript: `
 import { Component, OnInit } from '@angular/core';
diff --git a/src/app/showcase/doc/carousel/verticaldoc.ts b/src/app/showcase/doc/carousel/verticaldoc.ts
index 94ee75d1470..17924e98bb2 100644
--- a/src/app/showcase/doc/carousel/verticaldoc.ts
+++ b/src/app/showcase/doc/carousel/verticaldoc.ts
@@ -21,10 +21,9 @@ import { ProductService } from '../../service/productservice';
                                 <h4 class="mb-1">{{ product.name }}</h4>
                                 <h6 class="mt-0 mb-3">{{ product.price }}</h6>
                                 <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                                <div class="car-buttons mt-5">
-                                    <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                                    <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
-                                    <p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"></p-button>
+                                <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                                    <p-button icon="pi pi-search" [rounded]="true" />
+                                    <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
                                 </div>
                             </div>
                         </div>
@@ -70,18 +69,16 @@ export class VerticalDoc implements OnInit {
                     <h4 class="mb-1">{{product.name}}</h4>
                     <h6 class="mt-0 mb-3">{{product.price}}</h6>
                     <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                    <div class="car-buttons mt-5">
-                        <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                        <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
-                        <p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"></p-button>
-                    </div>
+                    <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                    <p-button icon="pi pi-search" [rounded]="true" />
+                    <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
+                </div>
                 </div>
             </div>
         </div>
     </ng-template>
 </p-carousel>`,
-        html: `
-<div class="card flex justify-content-center">
+        html: `<div class="card flex justify-content-center">
     <p-carousel [value]="products" [numVisible]="3" [numScroll]="1" orientation="vertical" verticalViewPortHeight="360px" [responsiveOptions]="responsiveOptions">
         <ng-template let-product pTemplate="item">
             <div class="product-item">
@@ -93,10 +90,9 @@ export class VerticalDoc implements OnInit {
                         <h4 class="mb-1">{{product.name}}</h4>
                         <h6 class="mt-0 mb-3">{{product.price}}</h6>
                         <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                        <div class="car-buttons mt-5">
-                            <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
-                            <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
-                            <p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"></p-button>
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                                <p-button icon="pi pi-search" [rounded]="true" />
+                                <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
                         </div>
                     </div>
                 </div>
diff --git a/src/app/showcase/doc/table/virtualscrolllazydoc.ts b/src/app/showcase/doc/table/virtualscrolllazydoc.ts
index ac335404988..7fdc9c34a56 100644
--- a/src/app/showcase/doc/table/virtualscrolllazydoc.ts
+++ b/src/app/showcase/doc/table/virtualscrolllazydoc.ts
@@ -139,6 +139,11 @@ import { LazyLoadEvent } from 'primeng/api';
 import { Car } from '../../domain/car';
 import { CarService } from '../../service/carservice';
 
+interface Column {
+    field: string;
+    header: string;
+}
+
 @Component({
     selector: 'table-virtual-scroll-lazy-demo',
     templateUrl: 'table-virtual-scroll-lazy-demo.html'
diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts
index d510f94b7f6..3ce6d9bef4e 100644
--- a/src/app/showcase/layout/doc/codeeditor/templates.ts
+++ b/src/app/showcase/layout/doc/codeeditor/templates.ts
@@ -489,6 +489,7 @@ const getAngularApp = (props: Props = {}) => {
     const serviceImports = code.service ? getServiceImports(code.service) : '';
     const routerModule = code.routerModule ? code.routerModule : `RouterModule.forRoot([{ path: '', component: ${componentName} }])`;
     const declarations = routeFiles && routeFiles.length ? (componentName ? routeFiles.map((r) => r.name).join(', ') + ',' + componentName : routeFiles.map((r) => r.name).join(', ')) : `${componentName}`;
+    const providers = code.service && code.service.length ? code.service.map((s) => s).join(', ') : '';
 
     const app_module_ts = `import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -696,7 +697,7 @@ ${serviceImports}
     ${routerModule}],
     declarations: [ ${declarations} ],
     bootstrap: [ ${componentName} ],
-    providers: [ MessageService ]
+    providers: [ ${providers} ]
 })
 
 export class AppModule {}`;