Basic route animations in Angular

In this recipe, you'll learn how to implement basic route animations in Angular. Although these are basic animations, they require a bit of a setup to be executed properly. You'll learn how to configure route animations by passing the transition state name to the route as a data property. You'll also learn how to use the RouterOutlet API to get the transition name and apply it to the animation to be executed.

Getting ready

The project that we are going to work with resides in chapter04/start_here/route-animations inside the cloned repository:

1. Open the project in Visual Studio Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

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

Figure 4.8 – route-animations app running on http://localhost:4200

Now that we have the app...