Fixed problems with the sidebar service. Switched to use "path" concept instead of component

src/app/app.menu.ts

@@ -1,7 +1,7 @@
 export const menuItems = [
   {
     title: 'Dashboard',
-    component: 'dashboard',
+    path: '/pages/dashboard',
     icon: 'fa fa-home',
     selected: false,
     expanded: false,
@@ -9,7 +9,7 @@ export const menuItems = [
   },
   {
     title: 'Charts',
-    component: 'charts',
+    path: '/pages/charts',
     icon: 'fa fa-bar-chart',
     selected: false,
     expanded: false,
@@ -17,13 +17,13 @@ export const menuItems = [
     subMenu: [
       {
         title: 'Chartist.Js',
-        component: 'chartist-js',
+        path: '/chartist-js',
       },
     ]
   },
   {
     title: 'UI Features',
-    component: 'ui',
+    path: '/pages/ui',
     icon: 'fa fa-laptop',
     selected: false,
     expanded: false,
@@ -31,25 +31,25 @@ export const menuItems = [
     subMenu: [
       {
         title: 'Typography',
-        component: 'typography',
+        path: '/typography',
       },
       {
         title: 'Buttons',
-        component: 'buttons',
+        path: '/buttons',
       },
       {
         title: 'Icons',
-        component: 'icons',
+        path: '/icons',
       },
       {
         title: 'Grid',
-        component: 'grid',
+        path: '/grid',
       },
     ]
   },
   {
     title: 'Form Elements',
-    component: 'forms',
+    path: '/pages/forms',
     icon: 'fa fa-pencil-square-o',
     selected: false,
     expanded: false,
@@ -57,17 +57,17 @@ export const menuItems = [
     subMenu: [
       {
         title: 'Form Inputs',
-        component: 'inputs',
+        path: '/inputs',
       },
       {
         title: 'Form Layouts',
-        component: 'layouts',
+        path: '/layouts',
       },
     ]
   },
   {
     title: 'Tables',
-    component: 'tables',
+    path: '/pages/tables',
     icon: 'fa fa-table',
     selected: false,
     expanded: false,
@@ -75,13 +75,13 @@ export const menuItems = [
     subMenu: [
       {
         title: 'Basic Tables',
-        component: 'basictables',
+        path: '/basictables',
       }
     ]
   },
   {
     title: 'Maps',
-    component: 'maps',
+    path: '/pages/maps',
     icon: 'fa fa-map-marker',
     selected: false,
     expanded: false,
@@ -89,19 +89,19 @@ export const menuItems = [
     subMenu: [
       {
         title: 'Google Maps',
-        component: 'googlemaps',
+        path: '/googlemaps',
       },
       {
         title: 'Leaflet Maps',
-        component: 'leafletmaps',
+        path: '/leafletmaps',
       },
       {
         title: 'Bubble Maps',
-        component: 'bubblemaps',
+        path: '/bubblemaps',
       },
       {
         title: 'Line Maps',
-        component: 'linemaps',
+        path: '/linemaps',
       }
     ]
   },
@@ -114,11 +114,11 @@ export const menuItems = [
     subMenu: [
       {
         title: 'Login',
-        url: '#/login',
+        path: '/login',
       },
       {
         title: 'Register',
-        url: '#/register',
+        path: '/register',
       }
     ]
   },

src/app/theme/components/baSidebar/baSidebar.component.ts

@@ -1,10 +1,9 @@
-import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
+import {Component, ElementRef, HostListener, ViewEncapsulation} from "@angular/core";
-import {Router} from '@angular/router';
+import {Router} from "@angular/router";
-
+import {AppState} from "../../../app.state";
-import {AppState} from '../../../app.state';
+import {layoutSizes} from "../../../theme";
-import {layoutSizes} from '../../../theme';
+import {BaSlimScroll} from "../../../theme/directives";
-import {BaSlimScroll} from '../../../theme/directives';
+import {BaSidebarService} from "./baSidebar.service";
-import {BaSidebarService} from './baSidebar.service';
 
 @Component({
   selector: 'ba-sidebar',
@@ -35,7 +34,9 @@ export class BaSidebar {
               private _state:AppState) {
 
     this.menuItems = this._sidebarService.getMenuItems();
-    // this._onRouteChange = this._router.root.subscribe((path) => this._selectMenuItem());
+    this._onRouteChange = this._router.events.subscribe(() => {
+      this._selectMenuItem();
+    });
     this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
       this.isMenuCollapsed = isCollapsed;
     });
@@ -49,7 +50,7 @@ export class BaSidebar {
   }
 
   public ngOnDestroy():void {
-    // this._onRouteChange.unsubscribe();
+    this._onRouteChange.unsubscribe();
   }
 
   public ngAfterViewInit():void {

src/app/theme/components/baSidebar/baSidebar.html

@@ -4,10 +4,10 @@
         [ngClass]="{'selected': item.selected && !item.expanded, 'with-sub-menu': item.subMenu, 'ba-sidebar-item-expanded': item.expanded}">
 
 
-      <a *ngIf="!item.component && !item.subMenu" [attr.href]="item.url || ''" [attr.target]="item.target || ''" class="al-sidebar-list-link">
+      <a *ngIf="!item.path && !item.subMenu" [attr.href]="item.url || ''" [attr.target]="item.target || ''" class="al-sidebar-list-link">
         <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
       </a>
-      <a *ngIf="item.component && !item.subMenu" [routerLink]="[item.component]" [attr.target]="item.target || ''" class="al-sidebar-list-link">
+      <a *ngIf="item.path && !item.subMenu" [routerLink]="[item.path]" [attr.target]="item.target || ''" class="al-sidebar-list-link">
         <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
       </a>
 
@@ -31,17 +31,17 @@
               [ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
             <li *ngFor="let subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)"
                 [ngClass]="{selected: subitem.selected}">
-              <a *ngIf="!item.component" (mouseenter)="hoverItem($event, item)" [attr.href]="subSubitem.url || ''" [attr.target]="subSubitem.target || ''">
+              <a *ngIf="!item.path" (mouseenter)="hoverItem($event, item)" [attr.href]="subSubitem.url || ''" [attr.target]="subSubitem.target || ''">
                 {{ subSubitem.title }}</a>
-              <a *ngIf="item.component" (mouseenter)="hoverItem($event, item)" [attr.target]="subSubitem.target || ''" [routerLink]="[item.component, subitem.component, subSubitem.component]">
+              <a *ngIf="item.path" (mouseenter)="hoverItem($event, item)" [attr.target]="subSubitem.target || ''" [routerLink]="[item.path, subitem.path]">
                 {{ subSubitem.title }}</a>
             </li>
           </ul>
-          <a *ngIf="!item.component && !subitem.subMenu" [attr.href]="subitem.url || ''"
+          <a *ngIf="!item.path && !subitem.subMenu" [attr.href]="subitem.url || ''" [routerLink]="[subitem.path || '']"
              (mouseenter)="hoverItem($event, item)" [attr.target]="subitem.target || ''">
             {{ subitem.title}}
           </a>
-          <a *ngIf="item.component && !subitem.subMenu" [routerLink]="[item.component, subitem.component]"
+          <a *ngIf="item.path && !subitem.subMenu" [routerLink]="[item.path, subitem.path]"
              (mouseenter)="hoverItem($event, item)" [attr.target]="subitem.target || ''">
             {{ subitem.title}}
           </a>

src/app/theme/components/baSidebar/baSidebar.service.ts

@@ -1,16 +1,17 @@
 import {Injectable} from '@angular/core';
 import {menuItems} from '../../../app.menu';
+import {Router, UrlTree} from "@angular/router";
 
 @Injectable()
 export class BaSidebarService {
 
-  private _router;
+  private _router:Router;
 
   public getMenuItems():Array<Object> {
     return menuItems;
   }
 
-  public setRouter(router): BaSidebarService {
+  public setRouter(router:Router):BaSidebarService {
     this._router = router;
     return this;
   }
@@ -22,12 +23,12 @@ export class BaSidebarService {
 
     items.forEach((menu:any) => {
 
-      this._selectItem([menu.component], menu);
+      this._selectItem([menu.path], menu);
       assignCurrent(menu);
 
       if (menu.subMenu) {
         menu.subMenu.forEach((subMenu) => {
-          this._selectItem([menu.component, subMenu.component], subMenu, menu);
+          this._selectItem([menu.path, subMenu.path], subMenu, menu);
           assignCurrent(subMenu);
         });
       }
@@ -43,11 +44,22 @@ export class BaSidebarService {
     }
   }
 
-  private _isCurrent(route) {
+  private _isCurrent(route:UrlTree):boolean {
-    return route ? this._router.isRouteActive(route) : false;
+    if (!route)
+      return false;
+
+    return this._router.url === this._router.serializeUrl(route);
   }
 
-  private _generateRoute(instructions) {
+  private _generateRoute(instructions:any[]):UrlTree {
-    return instructions.filter(i => typeof i !== 'undefined').length > 0 ? this._router.generate(instructions) : null;
+    if (!instructions)
+      return null;
+
+    instructions = instructions.filter(item => !!item);
+
+    if (instructions.length === 0)
+      return null;
+
+    return this._router.createUrlTree(instructions);
   }
 }