Using animation callbacks

In this recipe, you'll learn how to be notified and act upon animation state changes in Angular. As a simple example, we'll use the same bucket list app, and we'll reset the item-to-add option whenever the animation completes for adding an item.

Getting ready

The project that we are going to work with resides in chapter04/start_here/animation-callbacks 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.

4. Click the Login as Admin button, and you should see something like the following:

Figure 4.6 – animation-callbacks app running on http://localhost:4200

Now that we have the app running locally, let's see the steps of the recipe in the next section.

How to do it…

We have the same bucket app...