Animating lists in Angular using stagger animations

No matter what kind of web application you build today, you are likely to implement some sort of list in it. And to make those lists even better, why not implement elegant animations for them? In this recipe, you’ll learn how to animate lists in Angular using stagger animations.

Getting ready

The app that we are going to work with resides in start/apps/chapter04/ng-animating-lists inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-animating-lists
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 4.5: ng-animating-lists app running on http://localhost:4200

Now that we have the app running locally, let’s see the steps of the recipe in the next section.

How to do...