Params added in router for filtering and navigating between pages

src/app/app-routing.module.ts

@@ -12,6 +12,13 @@ const routes: Routes = [{
 		component: LoginComponent
 	},{
 		path: 'shop-details',
+        redirectTo: 'shop-details/dashboard',
+        pathMatch: 'full',
+	}, {
+		path: 'shop-details/:page',
+		component: WidgetsHolderComponent
+	}, {
+		path: 'shop-details/:page/:params',
 		component: WidgetsHolderComponent
 	},
 ];

src/app/dashboard/dashboard.component.html

@@ -2,8 +2,6 @@
 	<section class="order-stats">
 		<div class="widget-heading-holder">
 			<header> Dashboard </header>
-			<!-- <app-custom-selector header="Date" [options]="filterOptions" width="200"
-			[defaultOptionId]="filterOptions[1].id"></app-custom-selector> -->
 		</div>
 
 		<ul>
@@ -20,7 +18,7 @@
 				</div>
 
 				<div class="column">
-					<button class="rect-button" (click)="goToOrdersPage('pending')"> View </button>
+					<button class="rect-button" [routerLink]="['/shop-details/orders/pending']"> View </button>
 				</div>
 			</li>
 
@@ -37,7 +35,7 @@
 				</div>
 
 				<div class="column">
-					<button class="rect-button" (click)="goToOrdersPage('confirmed')"> View </button>
+					<button class="rect-button" [routerLink]="['/shop-details/orders/confirmed']"> View </button>
 				</div>
 			</li>
 
@@ -54,7 +52,7 @@
 				</div>
 
 				<div class="column">
-					<button class="rect-button" (click)="goToOrdersPage('delivered')"> View </button>
+					<button class="rect-button" [routerLink]="['/shop-details/orders/delivered']"> View </button>
 				</div>
 			</li>
 		</ul>
@@ -63,7 +61,7 @@
 	<ul class="pending-orders" *ngIf="getFilteredOrders('pending').length > 0">
 		<div class="heading">
 			<header> Pending Orders: </header>
-			<a (click)="goToOrdersPage('pending')"> View All </a>
+			<a [routerLink]="['/shop-details/orders/pending']"> View All </a>
 		</div>
 		<li *ngFor="let order of getFilteredOrders('pending')">
 			<div class="info">

src/app/dashboard/dashboard.component.ts

@@ -130,11 +130,4 @@ export class DashboardComponent implements OnInit {
         })
     }
 
-    goToOrdersPage(type: 'pending' | 'delivered' | 'confirmed') {
-        this.dashboardEvents.emit({
-            nav: 'orders',
-            type: type
-        });
-    }
-
 }

src/app/orders/orders.component.ts

@@ -33,7 +33,7 @@ export class OrdersComponent implements OnInit {
 	ngOnInit() {
         if (this.params) {
             try {
-                switch(this.params.filterType) {
+                switch(this.params) {
                     case 'pending': this.filterOption = {
                         orderStatus: 'Pending',
                         orderstatus_id: 6

src/app/widgets-holder/widgets-holder.component.html

@@ -29,32 +29,32 @@
 		</section>
 
 		<ul>
-			<li [ngClass]="{'active' : selected_nav.name === 'dashboard'}" (click)="selected_nav.name = 'dashboard'">
+			<li [ngClass]="{'active' : selected_nav.name === 'dashboard'}" [routerLink]="['/shop-details/dashboard']">
 				<i class="icon ion-ios-home"></i> <label> Dashboard </label>
 			</li>
-			<li [ngClass]="{'active' : selected_nav.name === 'orders'}" (click)="selected_nav.name = 'orders'">
+			<li [ngClass]="{'active' : selected_nav.name === 'orders'}" [routerLink]="['/shop-details/orders/pending']">
 				<i class="icon ion-ios-cube"></i> <label> Orders </label>
 			</li>
-			<li *ngIf="profile_type === 'VENDOR'" [ngClass]="{'active' : selected_nav.name === 'items'}" (click)="selected_nav.name = 'items'">
+			<li *ngIf="profile_type === 'VENDOR'" [ngClass]="{'active' : selected_nav.name === 'items'}" [routerLink]="['/shop-details/items']">
 				<i class="icon ion-ios-clipboard"></i> <label> Menu Items & Offers </label>
 			</li>
-			<li *ngIf="profile_type === 'VENDOR'" [ngClass]="{'active' : selected_nav.name === 'schedule'}" (click)="selected_nav.name = 'schedule'">
+			<li *ngIf="profile_type === 'VENDOR'" [ngClass]="{'active' : selected_nav.name === 'schedule'}" [routerLink]="['/shop-details/schedule']">
 				<i class="icon ion-ios-calendar"></i> <label> Shop Schedules </label>
 			</li>
-			<li *ngIf="profile_type === 'VENDOR'" [ngClass]="{'active' : selected_nav.name === 'profile'}" (click)="selected_nav.name = 'profile'">
+			<li *ngIf="profile_type === 'VENDOR'" [ngClass]="{'active' : selected_nav.name === 'profile'}" [routerLink]="['/shop-details/profile']">
 				<i class="icon ion-ios-person"></i> <label> Profile </label>
 			</li>
-			<li *ngIf="profile_type === 'VENDOR'" [ngClass]="{'active' : selected_nav.name === 'settings'}" (click)="selected_nav.name = 'settings'">
+			<li *ngIf="profile_type === 'VENDOR'" [ngClass]="{'active' : selected_nav.name === 'settings'}" [routerLink]="['/shop-details/settings']">
 				<i class="icon ion-ios-cog"></i> <label> Settings </label>
 			</li>
-			<li [ngClass]="{'active' : selected_nav.name === 'more'}" (click)="selected_nav.name = 'more'">
+			<li [ngClass]="{'active' : selected_nav.name === 'more'}" [routerLink]="['/shop-details/more']">
 				<i class="icon ion-ios-more"></i> <label> More </label>
 			</li>
 		</ul>
 	</section>
 
 	<section class="widgets">
-		<app-dashboard *ngIf="selected_nav.name === 'dashboard'" (dashboardEvents)="getWidgetsEvents($event)"></app-dashboard>
+		<app-dashboard *ngIf="selected_nav.name === 'dashboard'"></app-dashboard>
 		<app-orders [params]="selected_nav.params" *ngIf="selected_nav.name === 'orders'"></app-orders>
 		<app-menu-items *ngIf="selected_nav.name === 'items'"></app-menu-items>
 		<app-schedules *ngIf="selected_nav.name === 'schedule'"></app-schedules>

src/app/widgets-holder/widgets-holder.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
 	selector: 'app-widgets-holder',
@@ -18,10 +19,22 @@ export class WidgetsHolderComponent implements OnInit {
     profile_type: string;
 
 	constructor(
-        private router: Router
+        private router: Router,
+        private activatedRoute: ActivatedRoute
     ) { }
 
 	ngOnInit() {
+        this.activatedRoute.params.subscribe((params) => {
+            if (params.params) {
+                this.selected_nav = {
+                    name: params.page,
+                    params: params.params
+                };
+            } else {
+                this.selected_nav.name = params.page;
+            }
+        });
+
         this.profile_type = localStorage.current_login_type;
 
         if (this.profile_type === 'VENDOR') {
@@ -34,19 +47,6 @@ export class WidgetsHolderComponent implements OnInit {
 
 	}
 
-	getNavPage(page: string) {
-		this.selected_nav.name = page;
-	}
-
-    getWidgetsEvents(event: any) {
-        if (event.nav === 'orders') {
-            this.selected_nav.name = 'orders'
-            this.selected_nav.params = {
-                filterType: event.type
-            };
-        }
-    }
-
     logout() {
         localStorage.clear();
         this.router.navigate(['/']);