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.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/charts/chartsdemo.component.ts

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

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,6 +5,7 @@ import { FileUploadModule } from 'primeng/fileupload';
 import { FileDemoRoutingModule } from './filedemo-routing.module';
 import { FileDemoComponent } from './filedemo.component';
 
+
 @NgModule({
 	imports: [
 		CommonModule,

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/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/invalid/invalidstatedemo.component.ts

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

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/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/menus/confirmation.component.ts

@@ -1,7 +1,6 @@
 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>
@@ -9,4 +8,7 @@ import { Component } from '@angular/core';
   </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,41 +1,36 @@
 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: [
+		CommonModule,
+		BreadcrumbModule,
+		MenubarModule,
+		TabMenuModule,
+		StepsModule,
+		TieredMenuModule,
 		MenuModule,
+		ButtonModule,
+		ContextMenuModule,
 		MegaMenuModule,
 		PanelMenuModule,
-        MenubarModule,
-        BreadcrumbModule,
 		InputTextModule,
-        TieredMenuModule,
-        TabMenuModule,
-        ContextMenuModule,
-        StepsModule,
 		RouterModule.forChild([
 			{
 				path: '', component: MenusComponent, children: [
@@ -48,7 +43,7 @@ import { InputTextModule } from 'primeng/inputtext';
 			}
 		])
 	],
+	declarations: [MenusComponent],
 	exports: [RouterModule]
 })
 export class MenusModule { }
-

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

@@ -1,7 +1,6 @@
 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>
@@ -9,4 +8,7 @@ import { Component } from '@angular/core';
 		</div>
   	`
 })
-export class PaymentComponent { }
+export class PaymentComponent {
+
+	constructor() { }
+}

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

@@ -1,7 +1,6 @@
 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>
@@ -9,4 +8,7 @@ import { Component } from '@angular/core';
 		</div>
   	`
 })
-export class PersonalComponent { }
+export class PersonalComponent {
+
+	constructor() { }
+}

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

@@ -1,7 +1,6 @@
 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>
@@ -9,4 +8,7 @@ import { Component } from '@angular/core';
 		</div>
     `
 })
-export class SeatComponent { }
+export class SeatComponent {
+
+	constructor() { }
+}

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/misc/miscdemo.component.ts

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

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,7 +14,6 @@ import { RippleModule } from 'primeng/ripple';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
 import { TooltipModule } from 'primeng/tooltip';
 import { InputTextModule } from 'primeng/inputtext';
-
 @NgModule({
 	imports: [
 		CommonModule,

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

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

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/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/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: []
+		UIkitRoutingModule
+	]
 })
-export class UikitModule { }
+export class UIkitModule { }