update steps and tabmenu

src/app/app-routing.module.ts

@@ -24,6 +24,10 @@ import {InvalidStateDemoComponent} from './demo/view/invalidstatedemo.component'
 import {AppTimelineDemoComponent} from './pages/app.timelinedemo.component';
 import {IconsDemoComponent} from './demo/view/iconsdemo.component';
 
+import {SeatDemoComponent} from './demo/view/menu/seatdemo.component';
+import {PersonalDemoComponent} from './demo/view/menu/personaldemo.component';
+import {ConfirmationDemoComponent} from './demo/view/menu/confirmationdemo.component';
+import {PaymentDemoComponent} from './demo/view/menu/paymentdemo.component';
 @NgModule({
     imports: [
         RouterModule.forRoot([
@@ -41,7 +45,14 @@ import {IconsDemoComponent} from './demo/view/iconsdemo.component';
                     {path: 'uikit/tree', component: TreeDemoComponent},
                     {path: 'uikit/panel', component: PanelsDemoComponent},
                     {path: 'uikit/overlay', component: OverlaysDemoComponent},
-                    {path: 'uikit/menu', component: MenusDemoComponent},
+                    {path: 'uikit/menu', component: MenusDemoComponent,
+                        children: [
+                            {path:'', component: PersonalDemoComponent },
+                            {path:'seat', component: SeatDemoComponent },
+                            {path:'payment', component: PaymentDemoComponent },
+                            {path:'confirmation', component: ConfirmationDemoComponent },
+                        ]
+                    },
                     {path: 'uikit/message', component: MessagesDemoComponent},
                     {path: 'uikit/misc', component: MiscDemoComponent},
                     {path: 'uikit/charts', component: ChartsDemoComponent},

src/app/app.module.ts

@@ -119,6 +119,10 @@ import {AppCrudComponent} from './pages/app.crud.component';
 import {AppTimelineDemoComponent} from './pages/app.timelinedemo.component';
 import {IconsDemoComponent} from './demo/view/iconsdemo.component';
 import {AppBlocksDemoComponent} from './demo/view/app.blocksdemo.component';
+import {SeatDemoComponent} from './demo/view/menu/seatdemo.component';
+import {PaymentDemoComponent} from './demo/view/menu/paymentdemo.component';
+import {PersonalDemoComponent} from './demo/view/menu/personaldemo.component';
+import {ConfirmationDemoComponent} from './demo/view/menu/confirmationdemo.component';
 
 import {CountryService} from './demo/service/countryservice';
 import {CustomerService} from './demo/service/customerservice';
@@ -260,7 +264,11 @@ FullCalendarModule.registerPlugins([
         AppCrudComponent,
         AppTimelineDemoComponent,
         AppBlocksDemoComponent,
-        BlockViewer
+        BlockViewer,
+        SeatDemoComponent,
+        PaymentDemoComponent,
+        PersonalDemoComponent,
+        ConfirmationDemoComponent
     ],
     providers: [
         {provide: LocationStrategy, useClass: HashLocationStrategy},

src/app/demo/view/menu/confirmationdemo.component.ts

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

src/app/demo/view/menu/paymentdemo.component.ts

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

src/app/demo/view/menu/personaldemo.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-personaldemo',
+  template: `
+  <div class="flex align-items-center py-5 px-3">
+    <i class="pi pi-fw pi-user mr-2 text-2xl"></i>
+    <p class="m-0 text-lg">Personal Component Content via Child Route</p>
+  </div>
+  `
+})
+export class PersonalDemoComponent{
+
+  constructor() { }
+}

src/app/demo/view/menu/seatdemo.component.ts

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

src/app/demo/view/menusdemo.component.html

@@ -23,14 +23,16 @@
     <div class="col-12 md:col-6">
         <div class="card card-w-title">
             <h5>Steps</h5>
-            <p-steps [model]="stepsItems" [activeIndex]="1"></p-steps>
+            <p-steps [model]="routeItems" [readonly]="false" (activeIndexChange)="pageIndex = $event" [activeIndex]="pageIndex"></p-steps>
+            <router-outlet></router-outlet>
         </div>
     </div>
 
     <div class="col-12 md:col-6">
         <div class="card card-w-title">
             <h5>TabMenu</h5>
-            <p-tabMenu [model]="tabMenuItems" [activeItem]="tabMenuItems[0]"></p-tabMenu>
+            <p-tabMenu [model]="routeItems" [activeItem]="routeItems[0]"></p-tabMenu>
+            <router-outlet></router-outlet>
         </div>
     </div>
 

src/app/demo/view/menusdemo.component.ts

@@ -13,7 +13,7 @@ export class MenusDemoComponent implements OnInit {
 
     items: MenuItem[];
 
-    tabMenuItems: MenuItem[];
+    routeItems: MenuItem[];
 
     megaMenuItems: MegaMenuItem[];
 
@@ -27,6 +27,8 @@ export class MenusDemoComponent implements OnInit {
 
     plainMenuItems: MenuItem[];
 
+    pageIndex: number = 0;
+
     ngOnInit() {
 
         this.tieredItems = [
@@ -282,11 +284,11 @@ export class MenusDemoComponent implements OnInit {
         this.breadcrumbItems.push({ label: 'Backpacks' });
         this.breadcrumbItems.push({ label: 'Item' });
 
-        this.tabMenuItems = [
-            {label: 'Personal'},
-            {label: 'Seat'},
-            {label: 'Payment'},
-            {label: 'Confirmation'}
+        this.routeItems = [
+            {label: 'Personal',routerLink:''},
+            {label: 'Seat', routerLink:'seat'},
+            {label: 'Payment', routerLink:'payment'},
+            {label: 'Confirmation', routerLink:'confirmation'},
         ];
 
         this.megaMenuItems = [
@@ -466,21 +468,6 @@ export class MenusDemoComponent implements OnInit {
                 ]
             }
         ];
-
-        this.stepsItems = [
-            {
-                label: 'Personal'
-            },
-            {
-                label: 'Seat'
-            },
-            {
-                label: 'Payment'
-            },
-            {
-                label: 'Confirmation'
-            }
-        ];
     }
 
 }