Expert Angular

Animate collapse menu

In the this section, we will create a very important aspect of any application, that is, a sidebar menu for our application.

With what we have learned so far about Angular animations, we will create an example of a collapsing sidebar in this section.

Let's update the component template learn-animation.component.html and update the file with the following code snippet:

<h4>Collapse Menu</h4><button (click)="toggleMenu()" class="menuIcon">Toggle Menu</button> <div class="menu" [@toggleMenu]="menuState"> <ul>   <li>Home</li>   <li>Angular</li>   <li>Material Design</li>   <li>Sridhar Rao</li>   <li>Packt Publications</li> </ul></div>

An analysis of the preceding code is given here:

1. We are adding a <h4> heading, a Collapse menu. ...