Navigation drawer using angular 4 animation

In the last article, We understood the working of the Angular animations and saw a couple of examples based on that. So recently I got a request from one of my subscribers, to write an article on,Navigation drawer using angular 4 animation.

So I decided to write this article with a full explanation.As In the last article, I explained the concept of Angular animation, So here I won’t explain that. We will directly implement the Navigation drawer.

 Demo

Setting up our Application

Let’s use Angular CLI to setup our application. If you don’t have Angular CLI installed on your machine run the below command to install it globally.
npm install -g angular-cli
After Angular CLI installation, to create a new Angular project Run below command. This command will create all the necessary files, download all the required external dependencies and do all of the setup work for us.

ng new AppName

Creating Navigation drawer using angular 4 animation

Now Open theapp.module.tsfile and write the below code,

app.module.ts:

/*
Navigation drawer using angular 4 animation
@author Shashank Tiwari
*/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
  AppComponent
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now we are all set to create Navigation drawer, Here first we will implement the Navigation drawer with the help of HTML and CSS. So let’s first write down the markup, Oen yourapp.component.htmlfile and paste the below markup.

Well, if you have followed myprevious articleon Angular animation then I don’t think I need to explain anything here.

app.component.html:

<!-- 
Navigation drawer using angular 4 animation
@author Shashank Tiwari 
-->

<div class="overlay" [@showOverlay]="showOverlay"></div>

<div class="openDrawer"  (click)="navigationDrawer()">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</div>

<div class="page container">
<div class="row">
<div class="col-md-12">
<h2 class="text-center span6"> Navigation drawer using angular 2 animation</h2>
</div>
</div>
</div>

<div class="navigation" [@navigation]="navigation">
<div class="close-nav" (click)="navigationDrawer()">
<span class="glyphicon glyphicon-menu-left"></span>
</div>
<ul>
<li>Home</li>
<li>Posts</li>
<li>Ideas</li>
<li>Contacts</li>
<li>About</li>
</ul>
</div>

Now you let’s write down the CSS for the sameapp.component.cssfile and write down the below CSS.

app.component.css:

/*
    Navigation drawer using angular 4 animation
    @author Shashank Tiwari
*/
.heading{
  margin-top:200px;
}

.openDrawer{
    padding:1%;
    color: #000;
    position: fixed;
    margin: 2%;
    font-size: 2em;
    cursor: pointer;
    z-index: 2;
}

.navigation{
    width: 20%;
    position: fixed;
    top: 0;
    height: 100%;
    background-color: #000;
    z-index: 3;
}

.close-nav{
    float: right;
    font-size: 2em;
    margin: 3%;
    color: #fff;
    cursor: pointer;
}

.navigation ul{
    padding: 10%;
    margin-right: 10%;
    list-style-type: none;
    height: 100%;
}

.navigation li{
    height: 5%;
    width: 100%;
    margin-bottom: 10%;
    padding: 5%;
    border-bottom: solid 0.5px rgba(255, 255, 255, 0.11);
    cursor: pointer;
    color: #fff;
}

.navigation li:hover{
    border-left: solid 5px rgb(167, 167, 167);
    border-bottom: 0px;
    color: rgb(167, 167, 167);
}

.overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s; 
}

Till this time your Navigation Drawer looks like below Image.

Now let’s make our Navigation Drawer work by writing some typescript and animation for the same.In the below code we have a function, which is called by the hamburger icon and the close drawer button.

And in the animations metadata, we haveshowOverlayand the navigation animation.

So open theapp.component.tsand write down the below code,

app.component.ts:

/*
    Navigation drawer using angular 4 animation
    @author Shashank Tiwari
*/
import { Component,Input } from '@angular/core';
import {trigger,state,style,animate,transition,keyframes} from '@angular/animations';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations: [
        trigger('navigation', [
            state('true' , style({ left:'-20%'})), 
            state('false', style({ left:'0%'})),
            transition('0 => 1', animate('.2s')),
            transition('1 => 0', animate('.2s'))

        ]),
        trigger('showOverlay', [
            state('true' , style({ opacity: 1,display:"block" })), 
            state('false', style({ opacity: 0,display:"none" })),
            transition('0 => 1', animate('.2s')),
            transition('1 => 0', animate('.5s'))

        ])
    ]
})

export class AppComponent {
    /*---------------------- Navigation Drawer Animation Starts ----------------------*/    navigation:boolean = true;
    showOverlay:boolean = false;
    navigationDrawer(){
        this.navigation = !this.navigation;
        this.showOverlay = !this.showOverlay;
    }
    /*---------------------- Navigation Drawer Animation ends -----------------------*/}

So for this article that’s it. The angular animation is very easy to understand and with help of them, UI developers can achieve lot things very easily. If you have any thoughts on this article please let me know in the below comment box.