Adding sidebar in angular 4

Step 1.   Create new project named angular-sidenav using cli. (ng new angular-sidenav).

Step 2.   Install Bootstrap.

Step 3.   Install angular material ( nom install —save @angular/material)

Step 4.   Install animations (npm install —save @angular/animations)

Step 5.  Open app.module.ts file and import BrowserAnimationModule.

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;

import { BrowserModule } from’@angular/platform-browser’;

import { NgModule } from’@angular/core’;

import { AppComponent } from’./app.component’;

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule, BrowserAnimationsModule

],

providers: [],

bootstrap: [AppComponent]

})

exportclassAppModule { }

step 6. Import Component Modules in app.module.ts file From angular material

import { BrowserAnimationsModule } from’@angular/platform-browser/animations’;

import {MdInputModule, MdButtonModule, MdCheckboxModule, MdSidenavModule} from ‘@angular/material’;

import { BrowserModule } from’@angular/platform-browser’;

import { NgModule } from’@angular/core’;

import { AppComponent } from’./app.component’;

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule, BrowserAnimationsModule,

MdInputModule, MdButtonModule, MdCheckboxModule, MdSidenavModule

],

providers: [],

bootstrap: [AppComponent]

})

exportclassAppModule { }

Step7.  Include a theme ( Open .angular-cli.json file and add ../node_modules/@angular/material/prebuilt-themes/indigo-pink.css inside styles key)

“styles”: [

“../node_modules/@angular/material/prebuilt-themes/indigo-pink.css”,

“../node_modules/bootstrap/dist/css/bootstrap.min.css”,

“styles.css”

],
Step 8. Add hammerjs for some component like (md-slide-toggle, md-slider, mdTooltip). To install via npm, use the  nom install —save hammerjs command. After installing the package import this into app.module.ts file.

import { BrowserAnimationsModule } from’@angular/platform-browser/animations’;

import {MdInputModule, MdButtonModule, MdCheckboxModule, MdSidenavModule} from’@angular/material’;

import { BrowserModule } from’@angular/platform-browser’;

import { NgModule } from’@angular/core’;

import { AppComponent } from’./app.component’;

import ‘hammerjs’;

Step 9. Add  Material Icons

Add following link in your index.html page. For the more detail  visit Material Design Icons .

<!doctype html>

<htmllang=”en”>

<head>

<metacharset=”utf-8″>

<title>AngularSidenav</title>

<basehref=”/”>

<metaname=”viewport”content=”width=device-width, initial-scale=1″>

<linkrel=”icon”type=”image/x-icon”href=”favicon.ico”>

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>

</head>

<body>

<app-root></app-root>

</body>

</html>

Step 10. Open the app.component.html file and add this code.

<divclass=”container-fluid”>

<divclass=”row header-row”>

<buttontype=”button”class=”btn btn toggle-menu-button” (click)=”sidenav.toggle()”>

<spanclass=”glyphicon glyphicon-th-list toggle-menu-icon”></span>

</button>

</div>

</div>

<md-sidenav-containerclass=”sidebar-nav-container”>

<md-sidenav #sidenavclass=”sidebar-nav”>

Menu list here

</md-sidenav>

</md-sidenav-container>

And add this css code in app.component.css

.header-row {

height: 50px;

background: #0AA713;

}

.toggle-menu-icon {

font-size: 22pt;

color: #fff;

line-height: 33px;

}

.toggle-menu-button {

background: transparent;

}

.sidebar-nav-container {

width: 100%;

min-height: 300px;

height: auto;

}

.sidebar-nav {

background: #06C604;

width: 300px;

}

Output of this code is

Adding font awesome icons in angular 4

Install the font-awesome library using nom command line (npm install —save font-awesome).

After completing the installation open .angular-cli.json file and add the font-awesome style.

“styles”: [

“../node_modules/@angular/material/prebuilt-themes/indigo-pink.css”,

“../node_modules/bootstrap/dist/css/bootstrap.min.css”,

“styles.css”,

“../node_modules/font-awesome/css/font-awesome.css”

],

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © 2016 InfoxIT Portal. All rights reserved.
Seo wordpress plugin by www.seowizard.org.
Scroll To Top
Visit Us On FacebookVisit Us On Google PlusVisit Us On YoutubeCheck Our Feed