Disabling Angular animations conditionally

In this recipe, you'll learn how to disable animations in Angular conditionally. This is useful for a variety of cases including disabling animations on a particular device for example. Protip: Use ngx-device-detector to identify if your Angular app is running on a mobile or tablet etc. I built it :) Shameless plug aside, in this recipe we'll disable the animations for employees of the app considering we're rolling out animations only for admins at the moment.

Getting ready

The app that we are going to work with resides in start/apps/chapter04/ng-disable-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 npm run serve ng-disable-animations to serve the project

This should open the app in a new browser tab. Log in as an admin, add a few bucket items, and you should see the following:

Figure 4.1 – ng-disable-animations...