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 the app.module.ts file and write the below code,

app.module.ts:

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 your app.component.html file and paste the below markup.

Well, if you have followed my previous article on Angular animation then I don’t think I need to explain anything here.

app.component.html:

Now you let’s write down the CSS for the same app.component.css file and write down the below CSS.

app.component.css:

Till this time your Navigation Drawer looks like below Image.

Navigation drawer using angular 4 animation

 

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 have showOverlay and the navigation animation.

So open the app.component.ts and write down the below code,

app.component.ts:

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.