Angular Animations — Stagger Over Static and Async Data

Click here to share this article on LinkedIn »

Staggering animations are great at expressing state for data and UI’s, especially on lists and grids. It can be easily implemented and can be used with both static and async data. I will go over setting up a regular stagger animation and then making it work with observables using the Angular built-in async pipe.

State and Use of Stagger

Stagger is an experimental feature of angular animations. It gives the ability of delayed animation when there are multiple iterating items, like lists or grids etc. It creates a nice user interaction when data is incoming into applications and is currently evolving so this tutorial might change over time.

Basics of Angular Animations

Angular animations including stagger are configured in the component decorator (or in a separate file to have reusable animations) and used with the ‘@’ symbol on the component template.

For stagger, there are about 3 parts to get it going(maybe more depending on the case).

Declaring the animation in the component decorator Adding the animation with ‘@’ to a parent element in the component template Making the animation work with a given set of data

Let’s Get Going

First and Foremost, Don’t Forget The Imports

These are the imports you will be needing.

Angular Animations Imports for stagger animation

Setting Up The Animation

This animation fades in 15px from top to bottom. Check out a working demo. For the purposes of this tutorial, I won’t be going into the individual aspects of this animation. If you want to know more about what is going on I will go over it on a separate blog post.

The animation is inputted in the component decorator and can be anywhere as long as it is within the boundaries of the decorator.

Setting Up Animation On Template

Stagger animations are applied to the parent element where the data is rendered.

We bind a parameter on the animation declaration (@ symbol) to give it an idea of how many elements to apply the animation.

Things To Consider

Depending on how data is being passed into the template there might be different implementations. In this case, it is assumed that either this is static data or it is data that is being subscribed from the component class inside a lifecycle hook like NgOnInit.

If you only need stagger animation to work on the just described methods then that’s it! If you have followed the tutorial to this point you should be good to go.

Stagger With Async Pipe

Within the boundaries of this section, I am assuming you are somewhat knowledgeable about data binding and RxJS since we are using the async pipe.

If you are crazy about stagger and want to use the naughty async pipe you can do that too!

One Tiny Detail

The one problem we face when using async pipe is passing the ‘item.length’ parameter. In the snippet below we need to pass this parameter but it is undefined since “items” is being subscribed with the async pipe right underneath.

Not to worry! Here are a couple of ways to go about it while preventing undefined errors but still using the async pipe.

Async Pipe and Data Bindings

The first solution would be to leverage RxJS operators such as map.

Within the RxJS operator, we assign a variable the length of the data. We then proceed to bind this variable to the animation property on the template.

Async Pipe and ng-container

A more elegant approach would be to use the async pipe on ng-container to subscribe to an observable and then pass data down.

Ng-container is a structural directive in Angular that is not rendered in the DOM tree. In other words, it allows us to operate templates without leaving a footprint. If you haven’t looked at ng-container before, take a look at the Angular docs as it is much better documented then it used to.

So this is what our code looks like with ng-container:

Through this approach, we can bind “item.length” property directly on the template without needing to create an extra variable on the component. Thanks to ng-container we can live inside the async pipe subscription and therefore our values won’t be undefined.

From the component perspective, it is now much simpler as all we need now is an observable returned and nothing more.

Another benefit of this approach is that we can reduce the use of the async pipe. This is recommended to avoid resubscribing every time the async pipe is declared in our templates.

Conclusion

Stagger animations are a nice touch to any UI and certainly welcomed by any user when done right. I hope that this tutorial was helpful in illustrating how you can make use of stagger animations using both static and async data.

If you got this far I want to thank you! I am sure you will make the web a better experience for users with your animations and UI’s.

Looking For Contributors! I am starting a project based on Angular Animations and their use. Whether through ideas, design, development, memes, jokes you name it I want to collaborate with you and make it awesome.