update steps and tabmenu

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'
-            }
-        ];
     }
 
 }