Creating your first two-state Angular animation

In this recipe, you’ll create a basic two-state Angular animation that has a fading effect. We’ll start with an Angular app with a UI already built into it. We’ll then enable animations in the app using Angular animations and will move toward creating our first animation.

Getting ready

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

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

   

   Figure 4.1: ng-basic-animation app running on http://localhost:4200

Now that we have the app running, we will move on to the steps for the recipe.

How to do it…

We have...