Animating UI Elements in Angular #1

Using inkbars to highlight buttons, links and more

This article is the first of a series about animating UI elements in Angular extending the component set provided by AngularMaterial.

If you are familiar with Angular Material components you may have come across MatTab, a multi-tabs component to organize content enriched by a nice animating ‘inkbar’ smoothly shifting below the tabs to highlight the currently selected one.

Sometimes using the whole MatTab is simply too much, so, I created an InkbarComponent suitable to be used with regular buttons, links and basically all the kind of elements.

Notes

This article assumes you are familiar with Angular framework and Angular Material components.

How to use it

Let’s start from the end taking a look on how to use InkbarComponent in a template:

In the template above the wm-inkbar selector acts as a container of buttons where each button is turned into an…