Animating UI Elements in Angular #2
An animated toggler for your menus
This article is the second of a series about animating UI elements in Angular extending the component set provided by Angular Material.
Animating the menu toggler has been among the very first topic I learned while challenging myself in web development believing it was part of web development 101.
So you can imagine my surprise when, starting to learn Angular, I realized there was not an “animated toggler” component in Angular Material while all the examples I could find relied on a static icon from Material Icons:
This was when I decided to build an animated toggler for Angular myself.
Blending in with Angular Material
Angular Material uses global styles for theming. Every component has its own global styling classes while there is a mixin to include in your global style.scss file to define them for all the components according to the selected theming colors.
This alone is a topic worth to be covered in depth, so, I’ll publish something about it very soon.
For the sake of this article, let say our toggler will follow the same strategy by using
ViewEncapsulation.None and defining its own theming mixin in _toggler-theme.scss file to be included in the global styling as well.
Using the Toggler
The toggler component is used within a
mat-icon-button the very same way a static
mat-icon would be:
In the example above, the button using a static
mat-icon switches between the menu icon and the close icon depending on the status of a MatSidenav.
The animated equivalent using our toggler component simply passes the status to the
toggled input for the toggler to animate accordingly.
The Toggler Component
Our toggler component is made of three
div elements shaped into lines to achieve the classical ‘hamburger style’ :
Each line in the template is animated separately using
@bottom animations respectively although all of them are started simultaneously by
toggled input, the component has:
colorinput to select among primary, accent and warn color palettes according to theming. If none is selected, the toggler defaults to
toggler-styleinput to select among menu (the hamburger) , more_vert (three vertical dots) and more_horiz (three horizontal dots) recalling the name of the equivalent material icons.
Both inputs basically set a corresponding attribute to the
wm-toggler element directing the component style to provide the requested color and shape:
So the three
div elements are shaped according the
toggler-style attribute to resemble three horizontal lines, three vertical dots or three horizontal dots respectively.
While the shape is defined in the component style file, the coloring scheme definition comes from the mixin we’ll be including in the main global style file:
So the three
div elements background color will be set according to the
Animating the Toggler
In order to animate according to the three different style options, all the animation triggers defines the four states menu, more_vert, more_horiz and close describing how the element should transform:
So that when animating, the component will morph from the selected shape into the ‘x’ style close shape and back depending on the
toggled input value:
Try it Yourself
Feel free to reach me out at email@example.com for whatever question or curiosity.
A fully functional demo of the ToggleComponent is also available on StackBlitz here: