Route animations in Angular

In this recipe, you’ll learn how to implement route animations in Angular. 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. We’ll implement some 3D transitions, so it is going to be fun!

Getting ready

The app that we are going to work with resides in start/apps/chapter04/ng-route-animations 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-route-animations
   

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

   

   Figure 4.7: ng-route-animations app running on http://localhost:4200

Now that we have the...