Update uikit samples and bumped PrimeNG

package.json

@@ -22,7 +22,7 @@
         "chart.js": "^3.3.2",
         "primeflex": "^3.2.0",
         "primeicons": "6.0.1",
-        "primeng": "14.1.1",
+        "primeng": "14.1.2",
         "prismjs": "1.9.0",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
@@ -30,7 +30,7 @@
         "zone.js": "~0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "~14.0.3",
+        "@angular-devkit/build-angular": "^14.2.6",
         "@angular/cli": "~14.0.3",
         "@angular/compiler-cli": "~14.0.0",
         "@types/jasmine": "~3.10.0",

src/app/app-routing.module.ts

@@ -10,12 +10,12 @@ import { AppLayoutComponent } from "./layout/app.layout.component";
                 path: '', component: AppLayoutComponent,
                 children: [
                     { path: '', loadChildren: () => import('./demo/components/dashboard/dashboard.module').then(m => m.DashboardModule) },
-                    { path: 'uikit', loadChildren: () => import('./demo/components/uikit/uikit.module').then(m => m.UikitModule) },
+                    { path: 'uikit', loadChildren: () => import('./demo/components/uikit/uikit.module').then(m => m.UIkitModule) },
                     { path: 'utilities', loadChildren: () => import('./demo/components/utilities/utilities.module').then(m => m.UtilitiesModule) },
                     { path: 'documentation', loadChildren: () => import('./demo/components/documentation/documentation.module').then(m => m.DocumentationModule) },
                     { path: 'blocks', loadChildren: () => import('./demo/components/primeblocks/primeblocks.module').then(m => m.PrimeBlocksModule) },
-                    { path: 'pages', loadChildren: () => import('./demo/components/pages/pages.module').then(m => m.PagesModule) },
-                ],
+                    { path: 'pages', loadChildren: () => import('./demo/components/pages/pages.module').then(m => m.PagesModule) }
+                ]
             },
             { path: 'auth', loadChildren: () => import('./demo/components/auth/auth.module').then(m => m.AuthModule) },
             { path: 'landing', loadChildren: () => import('./demo/components/landing/landing.module').then(m => m.LandingModule) },

src/app/demo/components/uikit/button/buttondemo-routing.module.ts

@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { ButtonDemoComponent } from './buttondemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: ButtonDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: ButtonDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class ButtonDemoRoutingModule { }

src/app/demo/components/uikit/button/buttondemo.component.ts

@@ -24,4 +24,5 @@ export class ButtonDemoComponent implements OnInit {
         this.loading[index] = true;
         setTimeout(() => this.loading[index] = false, 1000);
     }
+    
 }

src/app/demo/components/uikit/button/buttondemo.module.ts

@@ -8,14 +8,14 @@ import { SplitButtonModule } from 'primeng/splitbutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        ButtonDemoRoutingModule,
-        ButtonModule,
-        RippleModule,
-        SplitButtonModule,
-        ToggleButtonModule,
-    ],
-    declarations: [ButtonDemoComponent]
+	imports: [
+		CommonModule,
+		ButtonDemoRoutingModule,
+		ButtonModule,
+		RippleModule,
+		SplitButtonModule,
+		ToggleButtonModule,
+	],
+	declarations: [ButtonDemoComponent]
 })
 export class ButtonDemoModule { }

src/app/demo/components/uikit/charts/chartsdemo.component.ts

@@ -265,4 +265,5 @@ export class ChartsDemoComponent implements OnInit {
             this.subscription.unsubscribe();
         }
     }
+    
 }

src/app/demo/components/uikit/file/filedemo-routing.module.ts

@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { FileDemoComponent } from './filedemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: FileDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: FileDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class FileDemoRoutingModule { }

src/app/demo/components/uikit/file/filedemo.component.ts

@@ -9,7 +9,7 @@ export class FileDemoComponent {
 
     uploadedFiles: any[] = [];
 
-    constructor(private messageService: MessageService) { }
+    constructor(private messageService: MessageService) {}
 
     onUpload(event: any) {
         for (const file of event.files) {
@@ -22,4 +22,5 @@ export class FileDemoComponent {
     onBasicUpload() {
         this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
     }
+
 }

src/app/demo/components/uikit/file/filedemo.module.ts

@@ -5,13 +5,14 @@ import { FileUploadModule } from 'primeng/fileupload';
 import { FileDemoRoutingModule } from './filedemo-routing.module';
 import { FileDemoComponent } from './filedemo.component';
 
+
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        FileDemoRoutingModule,
-        FileUploadModule
-    ],
-    declarations: [FileDemoComponent],
+	imports: [
+		CommonModule,
+		FormsModule,
+		FileDemoRoutingModule,
+		FileUploadModule
+	],
+	declarations: [FileDemoComponent],
 })
 export class FileDemoModule { }

src/app/demo/components/uikit/floatlabel/floatlabeldemo-routing.module.ts

@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { FloatLabelDemoComponent } from './floatlabeldemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: FloatLabelDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: FloatLabelDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class FloatlabelDemoRoutingModule { }

src/app/demo/components/uikit/floatlabel/floatlabeldemo.component.ts

@@ -38,11 +38,11 @@ export class FloatLabelDemoComponent implements OnInit {
 
     constructor(private countryService: CountryService) {
         this.cities = [
-            { name: 'New York', code: 'NY' },
-            { name: 'Rome', code: 'RM' },
-            { name: 'London', code: 'LDN' },
-            { name: 'Istanbul', code: 'IST' },
-            { name: 'Paris', code: 'PRS' }
+            {name: 'New York', code: 'NY'},
+            {name: 'Rome', code: 'RM'},
+            {name: 'London', code: 'LDN'},
+            {name: 'Istanbul', code: 'IST'},
+            {name: 'Paris', code: 'PRS'}
         ];
     }
 

src/app/demo/components/uikit/floatlabel/floatlabeldemo.module.ts

@@ -15,21 +15,21 @@ import { InputTextareaModule } from "primeng/inputtextarea";
 import { InputTextModule } from "primeng/inputtext";
 
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        FloatlabelDemoRoutingModule,
-        AutoCompleteModule,
-        CalendarModule,
-        ChipsModule,
-        DropdownModule,
-        InputMaskModule,
-        InputNumberModule,
-        CascadeSelectModule,
-        MultiSelectModule,
-        InputTextareaModule,
-        InputTextModule
-    ],
-    declarations: [FloatLabelDemoComponent]
+	imports: [
+		CommonModule,
+		FormsModule,
+		FloatlabelDemoRoutingModule,
+		AutoCompleteModule,
+		CalendarModule,
+		ChipsModule,
+		DropdownModule,
+		InputMaskModule,
+		InputNumberModule,
+		CascadeSelectModule,
+		MultiSelectModule,
+		InputTextareaModule,
+		InputTextModule
+	],
+	declarations: [FloatLabelDemoComponent]
 })
 export class FloatlabelDemoModule { }

src/app/demo/components/uikit/formlayout/formlayout-routing.module.ts

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { FormLayoutComponent } from './formlayout.component';
-
-@NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: FormLayoutComponent }
-    ])],
-    exports: [RouterModule]
-})
-export class FormlayoutRoutingModule { }

src/app/demo/components/uikit/formlayout/formlayout.component.ts

@@ -1,15 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    templateUrl: './formlayout.component.html'
-})
-export class FormLayoutComponent {
-
-    selectedState: any;
-
-    dropdownItems = [
-        { name: 'Option 1', code: 'Option 1' },
-        { name: 'Option 2', code: 'Option 2' },
-        { name: 'Option 3', code: 'Option 3' }
-    ];
-}

src/app/demo/components/uikit/formlayout/formlayout.module.ts

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormLayoutComponent } from './formlayout.component';
-import { DropdownModule } from 'primeng/dropdown';
-import { FormsModule } from '@angular/forms';
-import { FormlayoutRoutingModule } from './formlayout-routing.module';
-import { InputTextModule } from 'primeng/inputtext';
-import { ButtonModule } from 'primeng/button';
-import { InputTextareaModule } from 'primeng/inputtextarea';
-
-
-@NgModule({
-    imports: [
-        CommonModule,
-        DropdownModule,
-        FormsModule,
-        InputTextModule,
-        InputTextareaModule,
-        ButtonModule,
-        FormlayoutRoutingModule
-    ],
-    declarations: [FormLayoutComponent]
-})
-export class FormlayoutModule { }

src/app/demo/components/uikit/formlayout/formlayoutdemo-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { FormLayoutDemoComponent } from './formlayoutdemo.component';
+
+@NgModule({
+	imports: [RouterModule.forChild([
+		{ path: '', component: FormLayoutDemoComponent }
+	])],
+	exports: [RouterModule]
+})
+export class FormLayoutDemoRoutingModule { }

src/app/demo/components/uikit/formlayout/formlayoutdemo.component.html

@@ -14,7 +14,6 @@
 				<label htmlFor="age1">Age</label>
 				<input pInputText id="age1" type="text" />
 			</div>
-
 		</div>
 		
 		<div class="card p-fluid">

src/app/demo/components/uikit/formlayout/formlayoutdemo.component.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+
+@Component({
+    templateUrl: './formlayoutdemo.component.html'
+})
+export class FormLayoutDemoComponent {
+
+    selectedState: any = null;
+
+    states: any[] = [
+        {name: 'Arizona', code: 'Arizona'},
+        {name: 'California', value: 'California'},
+        {name: 'Florida', code: 'Florida'},
+        {name: 'Ohio', code: 'Ohio'},
+        {name: 'Washington', code: 'Washington'}
+    ];
+
+    dropdownItems = [
+        { name: 'Option 1', code: 'Option 1' },
+        { name: 'Option 2', code: 'Option 2' },
+        { name: 'Option 3', code: 'Option 3' }
+    ];
+
+    cities1: any[] = [];
+
+    cities2: any[] = [];
+
+    city1: any = null;
+
+    city2: any = null;
+
+}

src/app/demo/components/uikit/formlayout/formlayoutdemo.module.ts

@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FormLayoutDemoComponent } from './formlayoutdemo.component';
+import { FormLayoutDemoRoutingModule } from './formlayoutdemo-routing.module';
+import { AutoCompleteModule } from "primeng/autocomplete";
+import { CalendarModule } from "primeng/calendar";
+import { ChipsModule } from "primeng/chips";
+import { DropdownModule } from "primeng/dropdown";
+import { InputMaskModule } from "primeng/inputmask";
+import { InputNumberModule } from "primeng/inputnumber";
+import { CascadeSelectModule } from "primeng/cascadeselect";
+import { MultiSelectModule } from "primeng/multiselect";
+import { InputTextareaModule } from "primeng/inputtextarea";
+import { InputTextModule } from "primeng/inputtext";
+
+@NgModule({
+	imports: [
+		CommonModule,
+		FormsModule,
+		FormLayoutDemoRoutingModule,
+		AutoCompleteModule,
+		CalendarModule,
+		ChipsModule,
+		DropdownModule,
+		InputMaskModule,
+		InputNumberModule,
+		CascadeSelectModule,
+		MultiSelectModule,
+		InputTextareaModule,
+		InputTextModule
+	],
+	declarations: [FormLayoutDemoComponent]
+})
+export class FormLayoutDemoModule { }

src/app/demo/components/uikit/input/inputdemo.component.ts

@@ -6,6 +6,7 @@ import { CountryService } from 'src/app/demo/service/country.service';
     templateUrl: './inputdemo.component.html'
 })
 export class InputDemoComponent implements OnInit {
+    
     countries: any[] = [];
 
     filteredCountries: any[] = [];

src/app/demo/components/uikit/input/inputdemo.module.ts

@@ -27,33 +27,33 @@ import { ToggleButtonModule } from 'primeng/togglebutton';
 import { SliderModule } from 'primeng/slider';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        InputDemoRoutingModule,
-        AutoCompleteModule,
-        CalendarModule,
-        ChipsModule,
-        DropdownModule,
-        InputMaskModule,
-        InputNumberModule,
-        ColorPickerModule,
-        CascadeSelectModule,
-        MultiSelectModule,
-        ToggleButtonModule,
-        SliderModule,
-        InputTextareaModule,
-        RadioButtonModule,
-        InputTextModule,
-        RatingModule,
-        ChipModule,
-        KnobModule,
-        InputSwitchModule,
-        ListboxModule,
-        SelectButtonModule,
-        CheckboxModule,
-        ButtonModule
-    ],
-    declarations: [InputDemoComponent]
+	imports: [
+		CommonModule,
+		FormsModule,
+		InputDemoRoutingModule,
+		AutoCompleteModule,
+		CalendarModule,
+		ChipsModule,
+		DropdownModule,
+		InputMaskModule,
+		InputNumberModule,
+		ColorPickerModule,
+		CascadeSelectModule,
+		MultiSelectModule,
+		ToggleButtonModule,
+		SliderModule,
+		InputTextareaModule,
+		RadioButtonModule,
+		InputTextModule,
+		RatingModule,
+		ChipModule,
+		KnobModule,
+		InputSwitchModule,
+		ListboxModule,
+		SelectButtonModule,
+		CheckboxModule,
+		ButtonModule
+	],
+	declarations: [InputDemoComponent]
 })
 export class InputDemoModule { }

src/app/demo/components/uikit/invalid/invalidstatedemo-routing.module.ts

@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { InvalidStateDemoComponent } from './invalidstatedemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: InvalidStateDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: InvalidStateDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class InvalidStateDemoRoutingModule { }

src/app/demo/components/uikit/invalid/invalidstatedemo.component.ts

@@ -62,4 +62,5 @@ export class InvalidStateDemoComponent implements OnInit {
 
         this.filteredCountries = filtered;
     }
+    
 }

src/app/demo/components/uikit/invalid/invalidstatedemo.module.ts

@@ -16,22 +16,22 @@ import { InputTextModule } from "primeng/inputtext";
 import { PasswordModule } from "primeng/password";
 
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        InvalidStateDemoRoutingModule,
-        AutoCompleteModule,
-        CalendarModule,
-        ChipsModule,
-        DropdownModule,
-        InputMaskModule,
-        InputNumberModule,
-        CascadeSelectModule,
-        MultiSelectModule,
-        PasswordModule,
-        InputTextareaModule,
-        InputTextModule
-    ],
-    declarations: [InvalidStateDemoComponent]
+	imports: [
+		CommonModule,
+		FormsModule,
+		InvalidStateDemoRoutingModule,
+		AutoCompleteModule,
+		CalendarModule,
+		ChipsModule,
+		DropdownModule,
+		InputMaskModule,
+		InputNumberModule,
+		CascadeSelectModule,
+		MultiSelectModule,
+		PasswordModule,
+		InputTextareaModule,
+		InputTextModule
+	],
+	declarations: [InvalidStateDemoComponent]
 })
 export class InvalidStateDemoModule { }

src/app/demo/components/uikit/list/listdemo-routing.module.ts

@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { ListDemoComponent } from './listdemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: ListDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: ListDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class ListDemoRoutingModule { }

src/app/demo/components/uikit/list/listdemo.component.ts

@@ -69,4 +69,5 @@ export class ListDemoComponent implements OnInit {
     onFilter(dv: DataView, event: Event) {
         dv.filter((event.target as HTMLInputElement).value);
     }
+    
 }

src/app/demo/components/uikit/list/listdemo.module.ts

@@ -12,18 +12,18 @@ import { RatingModule } from 'primeng/rating';
 import { ButtonModule } from 'primeng/button';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ListDemoRoutingModule,
-        DataViewModule,
-        PickListModule,
-        OrderListModule,
-        InputTextModule,
-        DropdownModule,
-        RatingModule,
-        ButtonModule
-    ],
-    declarations: [ListDemoComponent]
+	imports: [
+		CommonModule,
+		FormsModule,
+		ListDemoRoutingModule,
+		DataViewModule,
+		PickListModule,
+		OrderListModule,
+		InputTextModule,
+		DropdownModule,
+		RatingModule,
+		ButtonModule
+	],
+	declarations: [ListDemoComponent]
 })
 export class ListDemoModule { }

src/app/demo/components/uikit/media/mediademo-routing.module.ts

@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { MediaDemoComponent } from './mediademo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: MediaDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: MediaDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class MediaDemoRoutingModule { }

src/app/demo/components/uikit/media/mediademo.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { Product } from 'src/app/demo/api/product';
-import { PhotoService } from 'src/app/demo/service/photo.service';
 import { ProductService } from 'src/app/demo/service/product.service';
+import { PhotoService } from 'src/app/demo/service/photo.service';
+import { Product } from 'src/app/demo/api/product';
 
 @Component({
     templateUrl: './mediademo.component.html'
@@ -60,4 +60,5 @@ export class MediaDemoComponent implements OnInit {
             this.images = images;
         });
     }
+    
 }

src/app/demo/components/uikit/media/mediademo.module.ts

@@ -8,14 +8,14 @@ import { GalleriaModule } from 'primeng/galleria';
 import { CarouselModule } from 'primeng/carousel';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        MediaDemoRoutingModule,
-        ButtonModule,
-        ImageModule,
-        GalleriaModule,
-        CarouselModule
-    ],
-    declarations: [MediaDemoComponent]
+	imports: [
+		CommonModule,
+		MediaDemoRoutingModule,
+		ButtonModule,
+		ImageModule,
+		GalleriaModule,
+		CarouselModule
+	],
+	declarations: [MediaDemoComponent]
 })
 export class MediaDemoModule { }

src/app/demo/components/uikit/menus/confirmation.component.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'app-confirmation',
-    template: `
-    <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
-        <i class="pi pi-fw pi-check mr-2 text-2xl"></i>
-        <p class="m-0 mt-5 text-center text-lg">Confirmation Component Content via Child Route</p>
-    </div>
+  template: `
+  <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
+    <i class="pi pi-fw pi-check mr-2 text-2xl"></i>
+    <p class="m-0 mt-5 text-center text-lg">Confirmation Component Content via Child Route</p>
+  </div>
   `
 })
-export class ConfirmationComponent { }
+export class ConfirmationComponent {
+
+  constructor() { }
+}

src/app/demo/components/uikit/menus/menus.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MegaMenuItem, MenuItem } from 'primeng/api';
 
 @Component({

src/app/demo/components/uikit/menus/menus.module.ts

@@ -1,54 +1,49 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
+import { MenusComponent } from './menus.component';
 import { PaymentComponent } from './payment.component';
 import { SeatComponent } from './seat.component';
 import { PersonalComponent } from './personal.component';
 import { ConfirmationComponent } from './confirmation.component';
-import { MenusComponent } from './menus.component';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { MenubarModule } from 'primeng/menubar';
+import { TabMenuModule } from 'primeng/tabmenu';
+import { StepsModule } from 'primeng/steps';
+import { TieredMenuModule } from 'primeng/tieredmenu';
 import { MenuModule } from 'primeng/menu';
+import { ButtonModule } from 'primeng/button';
+import { ContextMenuModule } from 'primeng/contextmenu';
 import { MegaMenuModule } from 'primeng/megamenu';
 import { PanelMenuModule } from 'primeng/panelmenu';
-import { TieredMenuModule } from 'primeng/tieredmenu';
-import { MenubarModule } from 'primeng/menubar';
-import { BreadcrumbModule } from 'primeng/breadcrumb';
-import { TabMenuModule } from 'primeng/tabmenu';
-import { ContextMenuModule } from 'primeng/contextmenu';
-import { StepsModule } from 'primeng/steps';
 import { InputTextModule } from 'primeng/inputtext';
-
 @NgModule({
-    declarations: [
-        MenusComponent,
-        PaymentComponent,
-        ConfirmationComponent,
-        PersonalComponent,
-        SeatComponent,
-
-    ],
-    imports: [
-        MenuModule,
-        MegaMenuModule,
-        PanelMenuModule,
-        MenubarModule,
-        BreadcrumbModule,
-        InputTextModule,
-        TieredMenuModule,
-        TabMenuModule,
-        ContextMenuModule,
-        StepsModule,
-        RouterModule.forChild([
-            {
-                path: '', component: MenusComponent, children: [
-                    { path: '', redirectTo: 'personal', pathMatch: 'full' },
-                    { path: 'personal', component: PersonalComponent },
-                    { path: 'confirmation', component: ConfirmationComponent },
-                    { path: 'seat', component: SeatComponent },
-                    { path: 'payment', component: PaymentComponent }
-                ]
-            }
-        ])
-    ],
-    exports: [RouterModule]
+	imports: [
+		CommonModule,
+		BreadcrumbModule,
+		MenubarModule,
+		TabMenuModule,
+		StepsModule,
+		TieredMenuModule,
+		MenuModule,
+		ButtonModule,
+		ContextMenuModule,
+		MegaMenuModule,
+		PanelMenuModule,
+		InputTextModule,
+		RouterModule.forChild([
+			{
+				path: '', component: MenusComponent, children: [
+					{ path: '', redirectTo: 'personal', pathMatch: 'full' },
+					{ path: 'personal', component: PersonalComponent },
+					{ path: 'confirmation', component: ConfirmationComponent },
+					{ path: 'seat', component: SeatComponent },
+					{ path: 'payment', component: PaymentComponent }
+				]
+			}
+		])
+	],
+	declarations: [MenusComponent],
+	exports: [RouterModule]
 })
 export class MenusModule { }
-

src/app/demo/components/uikit/menus/payment.component.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'app-payment',
-    template: `
-    <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
-        <i class="pi pi-fw pi-money-bill mr-2 text-2xl"></i>
-        <p class="m-0 mt-5 text-center text-lg">Payment Component Content via Child Route</p>
-    </div>
-  `
+	template: `
+		<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
+		<i class="pi pi-fw pi-money-bill mr-2 text-2xl"></i>
+		<p class="m-0 mt-5 text-center text-lg">Payment Component Content via Child Route</p>
+		</div>
+  	`
 })
-export class PaymentComponent { }
+export class PaymentComponent {
+
+	constructor() { }
+}

src/app/demo/components/uikit/menus/personal.component.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'app-personal',
-    template: `
-    <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
-        <i class="pi pi-fw pi-user mr-2 text-2xl"></i>
-        <p class="mt-5 text-center text-lg">Personal Component Content via Child Route</p>
-      </div>
-  `
+	template: `
+		<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
+			<i class="pi pi-fw pi-user mr-2 text-2xl"></i>
+			<p class="mt-5 text-center text-lg">Personal Component Content via Child Route</p>
+		</div>
+  	`
 })
-export class PersonalComponent { }
+export class PersonalComponent {
+
+	constructor() { }
+}

src/app/demo/components/uikit/menus/seat.component.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'app-seat',
-    template: `
-    <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
-        <i class="pi pi-fw pi-ticket mr-2 text-2xl"></i>
-        <p class="m-0 mt-5 text-center text-lg">Seat Component Content via Child Route</p>
-    </div>
-  `
+	template: `
+		<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
+			<i class="pi pi-fw pi-ticket mr-2 text-2xl"></i>
+			<p class="m-0 mt-5 text-center text-lg">Seat Component Content via Child Route</p>
+		</div>
+    `
 })
-export class SeatComponent { }
+export class SeatComponent {
+
+	constructor() { }
+}

src/app/demo/components/uikit/messages/messagesdemo-routing.module.ts

@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { MessagesDemoComponent } from './messagesdemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: MessagesDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: MessagesDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class MessagesDemoRoutingModule { }

src/app/demo/components/uikit/messages/messagesdemo.component.ts

@@ -46,4 +46,5 @@ export class MessagesDemoComponent {
         this.msgs = [];
         this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' });
     }
+    
 }

src/app/demo/components/uikit/messages/messagesdemo.module.ts

@@ -9,15 +9,15 @@ import { ToastModule } from 'primeng/toast';
 import { InputTextModule } from 'primeng/inputtext';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        MessagesDemoRoutingModule,
-        MessagesModule,
-        MessageModule,
-        ButtonModule,
-        ToastModule,
-        InputTextModule
-    ],
-    declarations: [MessagesDemoComponent]
+	imports: [
+		CommonModule,
+		MessagesDemoRoutingModule,
+		MessagesModule,
+		MessageModule,
+		ButtonModule,
+		ToastModule,
+		InputTextModule
+	],
+	declarations: [MessagesDemoComponent]
 })
 export class MessagesDemoModule { }

src/app/demo/components/uikit/misc/miscdemo-routing.module.ts

@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { MiscDemoComponent } from './miscdemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: MiscDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: MiscDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class MiscDemoRoutingModule { }

src/app/demo/components/uikit/misc/miscdemo.component.ts

@@ -22,4 +22,5 @@ export class MiscDemoComponent implements OnInit, OnDestroy {
     ngOnDestroy() {
         clearInterval(this.interval);
     }
+    
 }

src/app/demo/components/uikit/misc/miscdemo.module.ts

@@ -14,20 +14,20 @@ import { AvatarGroupModule } from 'primeng/avatargroup';
 import { ScrollTopModule } from 'primeng/scrolltop';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        MiscDemoRoutingModule,
-        ProgressBarModule,
-        BadgeModule,
-        AvatarModule,
-        ScrollPanelModule,
-        TagModule,
-        ChipModule,
-        ButtonModule,
-        SkeletonModule,
-        AvatarGroupModule,
-        ScrollTopModule
-    ],
-    declarations: [MiscDemoComponent]
+	imports: [
+		CommonModule,
+		MiscDemoRoutingModule,
+		ProgressBarModule,
+		BadgeModule,
+		AvatarModule,
+		ScrollPanelModule,
+		TagModule,
+		ChipModule,
+		ButtonModule,
+		SkeletonModule,
+		AvatarGroupModule,
+		ScrollTopModule
+	],
+	declarations: [MiscDemoComponent]
 })
 export class MiscDemoModule { }

src/app/demo/components/uikit/overlays/overlaysdemo-routing.module.ts

@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { OverlaysDemoComponent } from './overlaysdemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: OverlaysDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: OverlaysDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class OverlaysDemoRoutingModule { }

src/app/demo/components/uikit/overlays/overlaysdemo.component.html

@@ -37,16 +37,16 @@
                             <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" [paginator]="true" [rows]="5" (onRowSelect)="op2.hide()" responsiveLayout="scroll">
                                 <ng-template pTemplate="header">
                                     <tr>
-                                        <th pSortableColumn="name">Name<p-sortIcon field="name"></p-sortIcon></th>
-                                        <th>Image</th>
-                                        <th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
+                                        <th style="min-width:12rem" pSortableColumn="name">Name<p-sortIcon field="name"></p-sortIcon></th>
+                                        <th style="min-width:5rem">Image</th>
+                                        <th style="min-width:8rem" pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
                                     </tr>
                                 </ng-template>
                                 <ng-template pTemplate="body" let-rowData let-product>
                                     <tr [pSelectableRow]="rowData">
-                                        <td style="min-width: 10rem;">{{product.name}}</td>
-                                        <td style="min-width: 5rem;"><img src="assets/demo/images/product/{{product.image}}" [alt]="product.image" width="50" class="shadow-2"/></td>
-                                        <td style="min-width: 12rem;">{{formatCurrency(product.price)}}</td>
+                                        <td>{{product.name}}</td>
+                                        <td><img src="assets/demo/images/product/{{product.image}}" [alt]="product.image" width="50" class="shadow-2"/></td>
+                                        <td>{{formatCurrency(product.price)}}</td>
                                     </tr>
                                 </ng-template>
                             </p-table>

src/app/demo/components/uikit/overlays/overlaysdemo.component.ts

@@ -76,4 +76,5 @@ export class OverlaysDemoComponent implements OnInit {
     formatCurrency(value: number) {
         return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
     }
+    
 }

src/app/demo/components/uikit/overlays/overlaysdemo.module.ts

@@ -14,24 +14,23 @@ import { RippleModule } from 'primeng/ripple';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
 import { TooltipModule } from 'primeng/tooltip';
 import { InputTextModule } from 'primeng/inputtext';
-
 @NgModule({
-    imports: [
-        CommonModule,
-        OverlaysDemoRoutingModule,
-        ToastModule,
-        DialogModule,
-        FormsModule,
-        TooltipModule,
-        InputTextModule,
-        ButtonModule,
-        OverlayPanelModule,
-        TableModule,
-        ConfirmDialogModule,
-        SidebarModule,
-        RippleModule,
-        ConfirmPopupModule
-    ],
-    declarations: [OverlaysDemoComponent]
+	imports: [
+		CommonModule,
+		OverlaysDemoRoutingModule,
+		ToastModule,
+		DialogModule,
+		FormsModule,
+		TooltipModule,
+		InputTextModule,
+		ButtonModule,
+		OverlayPanelModule,
+		TableModule,
+		ConfirmDialogModule,
+		SidebarModule,
+		RippleModule,
+		ConfirmPopupModule
+	],
+	declarations: [OverlaysDemoComponent]
 })
 export class OverlaysDemoModule { }

src/app/demo/components/uikit/panels/panelsdemo-routing.module.ts

@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { PanelsDemoComponent } from './panelsdemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: PanelsDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: PanelsDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class PanelsDemoRoutingModule { }

src/app/demo/components/uikit/panels/panelsdemo.component.ts

@@ -28,4 +28,5 @@ export class PanelsDemoComponent implements OnInit {
             },
         ];
     }
+    
 }

src/app/demo/components/uikit/panels/panelsdemo.module.ts

@@ -17,23 +17,23 @@ import { SplitterModule } from 'primeng/splitter';
 import { PanelModule } from 'primeng/panel';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        PanelsDemoRoutingModule,
-        ToolbarModule,
-        ButtonModule,
-        RippleModule,
-        SplitButtonModule,
-        AccordionModule,
-        TabViewModule,
-        FieldsetModule,
-        MenuModule,
-        InputTextModule,
-        DividerModule,
-        SplitterModule,
-        PanelModule
-    ],
-    declarations: [PanelsDemoComponent]
+	imports: [
+		CommonModule,
+		FormsModule,
+		PanelsDemoRoutingModule,
+		ToolbarModule,
+		ButtonModule,
+		RippleModule,
+		SplitButtonModule,
+		AccordionModule,
+		TabViewModule,
+		FieldsetModule,
+		MenuModule,
+		InputTextModule,
+		DividerModule,
+		SplitterModule,
+		PanelModule
+	],
+	declarations: [PanelsDemoComponent]
 })
 export class PanelsDemoModule { }

src/app/demo/components/uikit/table/tabledemo-routing.module.ts

@@ -3,9 +3,9 @@ import { RouterModule } from '@angular/router';
 import { TableDemoComponent } from './tabledemo.component';
 
 @NgModule({
-    imports: [RouterModule.forChild([
-        { path: '', component: TableDemoComponent }
-    ])],
-    exports: [RouterModule]
+	imports: [RouterModule.forChild([
+		{ path: '', component: TableDemoComponent }
+	])],
+	exports: [RouterModule]
 })
 export class TableDemoRoutingModule { }

src/app/demo/components/uikit/table/tabledemo.component.html

@@ -14,19 +14,19 @@
 				</ng-template>
 				<ng-template pTemplate="header">
 					<tr>
-						<th>
+						<th style="min-width: 12rem">
 							<div class="flex justify-content-between align-items-center">
 								Name
 								<p-columnFilter type="text" field="name" display="menu" placeholder="Search by name"></p-columnFilter>
 							</div>
 						</th>
-						<th>
+						<th style="min-width: 12rem">
 							<div class="flex justify-content-between align-items-center">
 								Country
 								<p-columnFilter type="text" field="country.name" display="menu" placeholder="Search by country"></p-columnFilter>
 							</div>
 						</th>
-						<th>
+						<th style="min-width: 14rem">
 							<div class="flex justify-content-between align-items-center">
 								Agent
 								<p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
@@ -48,19 +48,19 @@
 								</p-columnFilter>
 							</div>
 						</th>
-						<th>
+						<th style="min-width: 10rem">
 							<div class="flex justify-content-between align-items-center">
 								Date
 								<p-columnFilter type="date" field="date" display="menu" placeholder="mm/dd/yyyy"></p-columnFilter>
 							</div>
 						</th>
-						<th>
+						<th style="min-width: 10rem">
 							<div class="flex justify-content-between align-items-center">
 								Balance
 								<p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter>
 							</div>
 						</th>
-						<th>
+						<th style="min-width: 12rem">
 							<div class="flex justify-content-between align-items-center">
 								Status
 								<p-columnFilter field="status" matchMode="equals" display="menu">
@@ -74,7 +74,7 @@
 								</p-columnFilter>
 							</div>
 						</th>
-						<th>
+						<th style="min-width: 12rem">
 							<div class="flex justify-content-between align-items-center">
 								Activity
 								<p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
@@ -88,7 +88,7 @@
 								</p-columnFilter>
 							</div>
 						</th>
-						<th style="width: 8rem">
+						<th style="min-width: 8rem">
 							<div class="flex justify-content-between align-items-center">
 								Verified
 								<p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
@@ -98,30 +98,30 @@
 				</ng-template>
 				<ng-template pTemplate="body" let-customer>
 					<tr>
-						<td style="min-width: 12rem;">
+						<td>
 							{{customer.name}}
 						</td>
-						<td style="min-width: 12rem;">
+						<td>
 							<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
 							<span class="image-text ml-2">{{customer.country.name}}</span>
 						</td>
-						<td style="min-width: 14rem;">
+						<td>
 							<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle"/>
 							<span class="image-text ml-2">{{customer.representative.name}}</span>
 						</td>
-						<td style="min-width: 10rem;">
+						<td>
 							{{customer.date | date: 'MM/dd/yyyy'}}
 						</td>
-						<td style="min-width: 10rem;">
+						<td>
 							{{customer.balance | currency:'USD':'symbol'}}
 						</td>
-						<td style="min-width: 12rem;">
+						<td>
 							<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
 						</td>
-						<td style="min-width: 12rem; ">
+						<td>
 							<p-progressBar [value]="customer.activity" [showValue]="false" [style]="{'height': '0.5rem'}"></p-progressBar>
 						</td>
-						<td class="text-center" style="min-width: 8rem;">
+						<td class="text-center">
 							<i class="pi" [ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500': !customer.verified}"></i>
 						</td>
 					</tr>

src/app/demo/components/uikit/table/tabledemo.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Customer, Representative } from 'src/app/demo/api/customer';
+import { CustomerService } from 'src/app/demo/service/customer.service';
+import { Product } from 'src/app/demo/api/product';
+import { ProductService } from 'src/app/demo/service/product.service';
 import { Table } from 'primeng/table';
 import { MessageService, ConfirmationService } from 'primeng/api';
-import { Customer, Representative } from 'src/app/demo/api/customer';
-import { Product } from 'src/app/demo/api/product';
-import { CustomerService } from 'src/app/demo/service/customer.service';
-import { ProductService } from 'src/app/demo/service/product.service';
 
 interface expandedRows {
     [key: string]: boolean;
@@ -134,4 +134,5 @@ export class TableDemoComponent implements OnInit {
         table.clear();
         this.filter.nativeElement.value = '';
     }
+    
 }

src/app/demo/components/uikit/table/tabledemo.module.ts

@@ -16,22 +16,22 @@ import { SliderModule } from 'primeng/slider';
 import { RatingModule } from 'primeng/rating';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        TableDemoRoutingModule,
-        FormsModule,
-        TableModule,
-        RatingModule,
-        ButtonModule,
-        SliderModule,
-        InputTextModule,
-        ToggleButtonModule,
-        RippleModule,
-        MultiSelectModule,
-        DropdownModule,
-        ProgressBarModule,
-        ToastModule
-    ],
-    declarations: [TableDemoComponent]
+	imports: [
+		CommonModule,
+		TableDemoRoutingModule,
+		FormsModule,
+		TableModule,
+		RatingModule,
+		ButtonModule,
+		SliderModule,
+		InputTextModule,
+		ToggleButtonModule,
+		RippleModule,
+		MultiSelectModule,
+		DropdownModule,
+		ProgressBarModule,
+		ToastModule
+	],
+	declarations: [TableDemoComponent]
 })
 export class TableDemoModule { }

src/app/demo/components/uikit/tree/treedemo.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { TreeNode } from 'primeng/api';
 import { NodeService } from 'src/app/demo/service/node.service';
+import { TreeNode} from 'primeng/api';
 
 @Component({
     templateUrl: './treedemo.component.html'
@@ -21,7 +21,7 @@ export class TreeDemoComponent implements OnInit {
 
     cols: any[] = [];
 
-    constructor(private nodeService: NodeService) { }
+    constructor(private nodeService: NodeService) {}
 
     ngOnInit() {
         this.nodeService.getFiles().then(files => this.files1 = files);

src/app/demo/components/uikit/tree/treedemo.module.ts

@@ -7,13 +7,13 @@ import { TreeModule } from 'primeng/tree';
 import { TreeTableModule } from 'primeng/treetable';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        TreeDemoRoutingModule,
-        FormsModule,
-        TreeModule,
-        TreeTableModule
-    ],
-    declarations: [TreeDemoComponent],
+	imports: [
+		CommonModule,
+		TreeDemoRoutingModule,
+		FormsModule,
+		TreeModule,
+		TreeTableModule
+	],
+	declarations: [TreeDemoComponent],
 })
 export class TreeDemoModule { }

src/app/demo/components/uikit/uikit-routing.module.ts

@@ -3,23 +3,23 @@ import { RouterModule } from '@angular/router';
 
 @NgModule({
     imports: [RouterModule.forChild([
-        { path: 'formlayout', loadChildren: () => import('./formlayout/formlayout.module').then(m => m.FormlayoutModule) },
-        { path: 'button', loadChildren: () => import('./button/buttondemo.module').then(m => m.ButtonDemoModule) },
-        { path: 'charts', loadChildren: () => import('./charts/chartsdemo.module').then(m => m.ChartsDemoModule) },
-        { path: 'file', loadChildren: () => import('./file/filedemo.module').then(m => m.FileDemoModule) },
-        { path: 'floatlabel', loadChildren: () => import('./floatlabel/floatlabeldemo.module').then(m => m.FloatlabelDemoModule) },
-        { path: 'input', loadChildren: () => import('./input/inputdemo.module').then(m => m.InputDemoModule) },
-        { path: 'invalidstate', loadChildren: () => import('./invalid/invalidstatedemo.module').then(m => m.InvalidStateDemoModule) },
-        { path: 'list', loadChildren: () => import('./list/listdemo.module').then(m => m.ListDemoModule) },
-        { path: 'media', loadChildren: () => import('./media/mediademo.module').then(m => m.MediaDemoModule) },
-        { path: 'message', loadChildren: () => import('./messages/messagesdemo.module').then(m => m.MessagesDemoModule) },
-        { path: 'misc', loadChildren: () => import('./misc/miscdemo.module').then(m => m.MiscDemoModule) },
-        { path: 'overlay', loadChildren: () => import('./overlays/overlaysdemo.module').then(m => m.OverlaysDemoModule) },
-        { path: 'panel', loadChildren: () => import('./panels/panelsdemo.module').then(m => m.PanelsDemoModule) },
-        { path: 'table', loadChildren: () => import('./table/tabledemo.module').then(m => m.TableDemoModule) },
-        { path: 'tree', loadChildren: () => import('./tree/treedemo.module').then(m => m.TreeDemoModule) },
-        { path: 'menu', loadChildren: () => import('./menus/menus.module').then(m => m.MenusModule) }
+        { path: 'button', data: { breadcrumb: 'Button' }, loadChildren: () => import('./button/buttondemo.module').then(m => m.ButtonDemoModule) },
+        { path: 'charts', data: { breadcrumb: 'Charts' }, loadChildren: () => import('./charts/chartsdemo.module').then(m => m.ChartsDemoModule) },
+        { path: 'file', data: { breadcrumb: 'File' }, loadChildren: () => import('./file/filedemo.module').then(m => m.FileDemoModule) },
+        { path: 'floatlabel', data: { breadcrumb: 'Float Label' }, loadChildren: () => import('./floatlabel/floatlabeldemo.module').then(m => m.FloatlabelDemoModule) },
+        { path: 'formlayout', data: { breadcrumb: 'Form Layout' }, loadChildren: () => import('./formlayout/formlayoutdemo.module').then(m => m.FormLayoutDemoModule) },
+        { path: 'input', data: { breadcrumb: 'Input' }, loadChildren: () => import('./input/inputdemo.module').then(m => m.InputDemoModule) },
+        { path: 'invalidstate', data: { breadcrumb: 'Invalid State' }, loadChildren: () => import('./invalid/invalidstatedemo.module').then(m => m.InvalidStateDemoModule) },
+        { path: 'list', data: { breadcrumb: 'List' }, loadChildren: () => import('./list/listdemo.module').then(m => m.ListDemoModule) },
+        { path: 'media', data: { breadcrumb: 'Media' }, loadChildren: () => import('./media/mediademo.module').then(m => m.MediaDemoModule) },
+        { path: 'message', data: { breadcrumb: 'Message' }, loadChildren: () => import('./messages/messagesdemo.module').then(m => m.MessagesDemoModule) },
+        { path: 'misc', data: { breadcrumb: 'Misc' }, loadChildren: () => import('./misc/miscdemo.module').then(m => m.MiscDemoModule) },
+        { path: 'overlay', data: { breadcrumb: 'Overlay' }, loadChildren: () => import('./overlays/overlaysdemo.module').then(m => m.OverlaysDemoModule) },
+        { path: 'panel', data: { breadcrumb: 'Panel' }, loadChildren: () => import('./panels/panelsdemo.module').then(m => m.PanelsDemoModule) },
+        { path: 'table', data: { breadcrumb: 'Table' }, loadChildren: () => import('./table/tabledemo.module').then(m => m.TableDemoModule) },
+        { path: 'tree', data: { breadcrumb: 'Tree' }, loadChildren: () => import('./tree/treedemo.module').then(m => m.TreeDemoModule) },
+        { path: 'menu', data: { breadcrumb: 'Menu' }, loadChildren: () => import('./menus/menus.module').then(m => m.MenusModule) }
     ])],
     exports: [RouterModule]
 })
-export class UikitRoutingModule { }
+export class UIkitRoutingModule { }

src/app/demo/components/uikit/uikit.module.ts

@@ -1,12 +1,11 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { UikitRoutingModule } from './uikit-routing.module';
+import { UIkitRoutingModule } from './uikit-routing.module';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        UikitRoutingModule
-    ],
-    declarations: []
+	imports: [
+		CommonModule,
+		UIkitRoutingModule
+	]
 })
-export class UikitModule { }
+export class UIkitModule { }