Update folder structure and refactor

src/app/app-routing.module.ts

@@ -23,7 +23,6 @@ import {FloatLabelComponent} from './components/floatlabel/floatlabel.component'
 import { InvalidStateComponent } from './components/invalidstate/invalidstate.component';
 import { TimelineComponent } from './components/timeline/timeline.component';
 import { IconsComponent } from './components/icons/icons.component';
-import {MenusComponent} from './components/menus/menus.component';
 @NgModule({
     imports: [
         RouterModule.forRoot([
@@ -42,7 +41,7 @@ import {MenusComponent} from './components/menus/menus.component';
                     {path: 'uikit/panel', component: PanelsComponent},
                     {path: 'uikit/overlay', component: OverlaysComponent},
                     {path: 'uikit/media', component: MediaComponent},
-                    {path: 'uikit/menu', component: MenusComponent},
+                    {path: 'uikit/menu', loadChildren: () => import('./components/menus/menus.module').then(m => m.MenusModule)},
                     {path: 'uikit/message', component: MessagesComponent},
                     {path: 'uikit/misc', component: MiscComponent},
                     {path: 'uikit/charts', component: ChartsComponent},

src/app/app.main.component.ts

@@ -1,4 +1,4 @@
-import {Component, AfterViewInit, OnDestroy, ViewChild, Renderer2, OnInit} from '@angular/core';
+import { Component, AfterViewInit, OnDestroy, Renderer2, OnInit } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { PrimeNGConfig } from 'primeng/api';
 import { AppComponent } from './app.component';

src/app/app.module.ts

@@ -120,6 +120,10 @@ import {TimelineComponent} from './components/timeline/timeline.component';
 import { IconsComponent } from './components/icons/icons.component';
 import { AppBlocksComponent } from './components/app-blocks/app-blocks.component';
 
+import { PaymentComponent} from './components/menus/payment.component';
+import { ConfirmationComponent } from './components/menus/confirmation.component';
+import { PersonalComponent } from './components/menus/personal.component';
+import { SeatComponent } from './components/menus/seat.component';
 import { CountryService } from './service/countryservice';
 import { CustomerService } from './service/customerservice';
 import { EventService } from './service/eventservice';
@@ -250,11 +254,11 @@ import {MenuService} from './service/app.menu.service';
         TimelineComponent,
         AppBlocksComponent,
         BlockViewer,
-        // SeatDemoComponent,
-        // PaymentDemoComponent,
-        // PersonalDemoComponent,
-        // ConfirmationDemoComponent,
-        MediaComponent
+        MediaComponent,
+        PaymentComponent,
+        ConfirmationComponent,
+        PersonalComponent,
+        SeatComponent,
     ],
     providers: [
         {provide: LocationStrategy, useClass: HashLocationStrategy},

src/app/components/dashboard/dashboard.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import {MenuModule} from 'primeng/menu';
 import { MenuItem } from 'primeng/api';
 import { Product } from '../../api/product';
 import { ProductService } from '../../service/productservice';

src/app/components/invalidstate/invalidstate.component.ts

@@ -6,7 +6,6 @@ import {CountryService} from '../../service/countryservice';
 })
 export class InvalidStateComponent implements OnInit {
 
-
     countries: any[];
 
     cities: any[];

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

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-confirmationdemo',
+  selector: 'app-confirmation',
   template: `
   <div class="flex flex-column align-items-center py-5 px-3">
     <i class="pi pi-fw pi-check mr-2 text-2xl"></i>
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
   </div>
   `
 })
-export class ConfirmationDemoComponent {
+export class ConfirmationComponent {
 
   constructor() { }
 }

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

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+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';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    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]
+})
+export class MenusModule { }

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

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-paymentdemo',
+  selector: 'app-payment',
   template: `
     <div class="flex flex-column align-items-center py-5 px-3">
       <i class="pi pi-fw pi-money-bill mr-2 text-2xl"></i>
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
     </div>
   `
 })
-export class PaymentDemoComponent{
+export class PaymentComponent{
 
   constructor() { }
 }

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

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-personaldemo',
+  selector: 'app-personal',
   template: `
   <div class="flex flex-column align-items-center py-5 px-3">
     <i class="pi pi-fw pi-user mr-2 text-2xl"></i>
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
   </div>
   `
 })
-export class PersonalDemoComponent{
+export class PersonalComponent{
 
   constructor() { }
 }

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

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-seatdemo',
+  selector: 'app-seat',
   template: `
     <div class="flex flex-column align-items-center py-5 px-3">
       <i class="pi pi-fw pi-ticket mr-2 text-2xl"></i>
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
     </div>
   `
 })
-export class SeatDemoComponent{
+export class SeatComponent{
 
   constructor() { }
 }

src/app/components/menus/stepsmenu/stepsmenu.module.ts

@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule, Routes } from '@angular/router';
-
-import { PaymentDemoComponent } from './paymentdemo.component';
-import { SeatDemoComponent } from './seatdemo.component';
-import { PersonalDemoComponent } from './personaldemo.component';
-import { ConfirmationDemoComponent } from './confirmationdemo.component';
-// import { MenusDemoComponent } from '../menusdemo.component';
-
-@NgModule({
-  declarations: [],
-  imports: [
-    CommonModule,
-    RouterModule.forChild([
-        // {path:'',component: MenusDemoComponent, children:[
-				// {path:'', redirectTo: 'personal', pathMatch: 'full'},
-				// {path: 'personal', component: PersonalDemoComponent},
-				// {path: 'confirmation', component: ConfirmationDemoComponent},
-				// {path: 'seat', component: SeatDemoComponent},
-				// {path: 'payment', component: PaymentDemoComponent}
-        // ]}
-    ])
-  ],
-  exports: [RouterModule]
-})
-export class MenudemoModule { }