Animating UI Elements in Angular #2

An animated toggler for your menus

Lucio Francisco
Wizdm Genesys

--

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.

--

--

Lucio Francisco
Wizdm Genesys

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