Creating your first two-state Angular animation

In this recipe, you'll create a basic two-state Angular animation using a fading effect. We'll start with a fresh Angular project with some UI already built into it, enable animations within the app, and then move toward creating our first animation.

Getting ready

The project that we are going to work with resides in chapter04/start_here/ng-basic-animation 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 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 an app that doesn't have Angular animations configured at all. So...