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.
The project that we are going to work with resides in
chapter04/start_here/route-animations inside the cloned repository:
- Open the project in Visual Studio Code.
- Open the terminal and run
npm installto install the dependencies of the project.
- Once done, run
ng serve -o.
This should open the app in a new browser tab, and you should see something like the following: