Providing alternate classes against same DI Token

In this recipe, you'll learn how to provide two different services to the app using Aliased class providers. This is extremely helpful in complex applications where you need to narrow down the implementation of the service/class for some components/modules. That is providing different classes against the same DI token to have a polymorphic behavior. Additionally, aliasing is used in component/service unit tests to mock the dependent service's actual implementation so that we don't rely on it.

Getting ready

The app that we are going to work with resides in start/apps/chapter03/ng-aliased-class-providers 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-aliased-class-providers to serve the project

This should open the app in a new browser tab and you should see the app as shown in Figure 3.11

1. Click on the Login...

Dynamic configurations using Value providers

In this recipe, you'll learn how to use value providers in Angular to provide constants and config values to your app. We'll start with the same example from the previous recipe, that is with the EmployeeComponent and AdminComponent using the BucketComponent to manage bucket of fruits. We will restrict the EmployeeComponent from deleting items from the bucket by using the configuration using value provider. As a result. the employees won't even see the Delete button.

Getting ready

The app that we are going to work with resides in start/apps/chapter03/ng-aliased-class-providers 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-aliased-class-providers to serve the project

This should open the app in a new browser tab and you should see the app as shown in Figure 3.11

1. Click on the Login as Admin button. You should...

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...

Working with multi-state animations

In this recipe, we’ll work with Angular animations containing multiple states. This means that we’ll work with more than two states for a particular item. We’ll be using the same Facebook and Twitter cards example for this recipe as well.

We’ll configure the following states for both cards:

• The state when a card appears on the screen.
• The state when the user hovers over a card.
• The state when the user moves the mouse away from the card.

Getting ready

The app that we are going to work with resides in start/apps/chapter04/ng-multi-state-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 the following command to serve the project:

   npm run serve ng-multi-state-animations
   

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

Creating complex Angular animations using keyframes

Since you already know about Angular animations from the previous recipes, you might be thinking, “That’s easy enough.” Well, time to level up your animation skills in this recipe. You’ll create a complex Angular animation using keyframes in this recipe to get started with writing some advanced animations.

Getting ready

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

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

   

   Figure 4.3: ng-animations-keyframes app running on http://localhost:4200

Now that we have the app running locally, let’...

Animating lists in Angular using stagger animations

No matter what kind of web application you build today, you are likely to implement some sort of list in it. And to make those lists even better, why not implement elegant animations for them? In this recipe, you’ll learn how to animate lists in Angular using stagger animations.

Getting ready

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

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

   

   Figure 4.5: ng-animating-lists 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...

Sequential vs parallel animations in Angular

In this recipe, you’ll learn how to run Angular animations in a sequence vs in parallel. This is handy for when we want to have one animation finished before we start the next one, or to run the animations simultaneously.

Getting ready

The app that we are going to work with resides in start/apps/chapter04/ng-seq-parallel-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 the following command to serve the project:

   npm run serve ng-seq-parallel-animations
   

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

   

   Figure 4.6: ng-seq-parallel-animations 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 an app that displays...

Route animations in Angular

In this recipe, you’ll learn how to implement route animations in Angular. 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. We’ll implement some 3D transitions, so it is going to be fun!

Getting ready

The app that we are going to work with resides in start/apps/chapter04/ng-route-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 the following command to serve the project:

   npm run serve ng-route-animations
   

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

   

   Figure 4.7: ng-route-animations app running on http://localhost:4200

Now that we have the...

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.

Pro tip: Use ngx-device-detector to identify if your Angular app is running on a mobile, tablet, etc. (A little secret that is not so-secret anymore…I built it!)

Shameless plug aside, in this recipe, we’ll disable animations for employees in the application, 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 the following command to serve the project:

   npm run serve ng-disable-animations
   

   This should...