Lucio Francisco
Oct 1 · 3 min read

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:

Static Icon :/

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:

Using Toggler Component

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’ :

Toggler Component

Each line in the template is animated separately using @top, @middle, and @bottom animations respectively although all of them are started simultaneously by trigger().

Besides the toggled input, the component has:

  • A color input to select among primary, accent and warn color palettes according to theming. If none is selected, the toggler defaults to currentColor.
  • A toggler-style input 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:

Toggler Component Style

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:

Toggler Theme Mixin

So the three div elements background color will be set according to the color attribute.

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:

Toggler Animations

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

The TogglerComponent is now part of wizdm.io, an open source project hosted on github.

Feel free to reach me out at hello@wizdm.io for whatever question or curiosity.

A fully functional demo of the ToggleComponent is also available on StackBlitz here:

Wizdm Genesys

An attempt in combining modern software development with ancient wisdom

Lucio Francisco

Written by

I believe that whatever problem we’re puzzling ourselves with, once we really get to the bottom of it the solution has to be simple

Wizdm Genesys

An attempt in combining modern software development with ancient wisdom

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade