sidebar.component.ts************
import { Component, OnInit } from '@angular/core';
declare const $: any;
declare interface RouteInfo {
path: string;
title: string;
icon: string;
class: string;
}
export const ROUTES: RouteInfo[] = [
{ path: '/dashboard', title: 'Dashboard', icon: 'dashboard', class: '' },
{ path: '/user-profile', title: 'User Profile', icon:'person', class: '' },
{ path: '/table-list', title: 'Table List', icon:'content_paste', class: '' },
{ path: '/typography', title: 'Typography', icon:'library_books', class: '' },
{ path: '/icons', title: 'Icons', icon:'bubble_chart', class: '' },
{ path: '/maps', title: 'Maps', icon:'location_on', class: '' },
{ path: '/notifications', title: 'Notifications', icon:'notifications', class: '' },
{ path: '/upgrade', title: 'Upgrade to PRO', icon:'unarchive', class: 'active-pro' },
];
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
menuItems: any[];
constructor() { }
ngOnInit() {
this.menuItems = ROUTES.filter(menuItem => menuItem);
}
isMobileMenu() {
if ($(window).width() > 991) {
return false;
}
return true;
};
}
**************sidebar.component.html**************
<div class="logo">
<a href="https://www.creative-tim.com" class="simple-text">
<div class="logo-img">
<img src="/assets/img/angular2-logo-red.png"/>
</div>
Creative Tim
</a>
</div>
<div class="sidebar-wrapper">
<div *ngIf="isMobileMenu()">
<form class="navbar-form">
<span class="bmd-form-group">
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<button mat-raised-button type="submit" class="btn btn-white btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</span>
</form>
<ul class="nav navbar-nav nav-mobile-menu">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">
<i class="material-icons">dashboard</i>
<p>
<span class="d-lg-none d-md-block">Stats</span>
</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javascript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">notifications</i>
<span class="notification">5</span>
<p>
<span class="d-lg-none d-md-block">Some Actions</span>
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mike John responded to your email</a>
<a class="dropdown-item" href="#">You have 5 new tasks</a>
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">
<i class="material-icons">person</i>
<p>
<span class="d-lg-none d-md-block">Account</span>
</p>
</a>
</li>
</ul>
</div>
<ul class="nav">
<li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
<a class="nav-link" [routerLink]="[menuItem.path]">
<i class="material-icons">{{menuItem.icon}}</i>
<p>{{menuItem.title}}</p>
</a>
</li>
</ul>
</div>
***********components.module.ts************
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FooterComponent } from './footer/footer.component';
import { NavbarComponent } from './navbar/navbar.component';
import { SidebarComponent } from './sidebar/sidebar.component';
@NgModule({
imports: [
CommonModule,
RouterModule,
],
declarations: [
FooterComponent,
NavbarComponent,
SidebarComponent
],
exports: [
FooterComponent,
NavbarComponent,
SidebarComponent
]
})
export class ComponentsModule { }
***********routing***********
import { NgModule } from '@angular/core';
import { CommonModule, } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule } from '@angular/router';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
const routes: Routes =[
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full',
}, {
path: '',
component: AdminLayoutComponent,
children: [{
path: '',
loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'
}]
}
];
@NgModule({
imports: [
CommonModule,
BrowserModule,
RouterModule.forRoot(routes,{
useHash: true
})
],
exports: [
],
})
export class AppRoutingModule { }
***********app.component.html
<router-outlet></router-outlet>