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 npm run serve ng-seq-parallel-animations to serve the project

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 two cards we used in the previous recipes. To see how to use animation callbacks, we...

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 npm run serve ng-route-animations to serve the project

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

Figure 4.8 – ng-route-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...

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

Listening to multiple observable streams

In this recipe, we’ll work with the combineLatest operator to listen to multiple observable streams at once. Using this operator results in having an array as an output, combining all the streams. This approach is appropriate for when you want the latest output from all the streams, combined in a single subscription.

Getting ready

The app that we are going to work with resides in start/apps/chapter05/rx-multiple-streams 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 rx-multiple-streams
   

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

   

   Figure 5.2: The rx-multiple-streams app running on http://localhost:4200

Now that we have the app running locally, let’s see the steps of the recipe...

Unsubscribing streams to avoid memory leaks

Streams are fun to work with and they’re awesome. You’ll know more about RxJS and streams when you’ve finished this chapter. One reality is facing unseen problems that occur when streams are used without caution. One of the biggest mistakes to make with streams is to not unsubscribe them when we no longer need them, and in this recipe, you’ll learn how to unsubscribe streams to avoid memory leaks in your Angular apps.

Getting ready

The app that we are going to work with resides in start/apps/chapter05/rx-unsubscribing-streams 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 rx-unsubscribing-streams
   

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

   

   Figure 5.3: The rxjs-unsubscribing...

Using Angular’s async pipe to unsubscribe streams automatically

As you learned in the previous recipe, it is crucial to unsubscribe the streams you subscribe to. What if we had an even simpler way to unsubscribe them when the component gets destroyed—that is, letting Angular take care of it somehow? In this recipe, you’ll learn how to use Angular’s async pipe with an observable to directly bind the data in the stream to the Angular template instead of having to subscribe in the *.component.ts file.

Getting ready

The app that we are going to work with resides in start/apps/chapter05/ng-async-pipe 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-async-pipe
   

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

   

   Figure 5.5...

Using the map operator to transform data

When making the API/HTTP calls in a web application, it is often the case that the server doesn’t return the data in a form that is easy to directly render to the UI. We often need some sort of transformation of the data received from the server to map it to something our UI can work with. In this recipe, you’re going to learn how to use the map operator to transform responses from an HTTP call.

Getting ready

The app that we are going to work with resides in start/apps/chapter05/rx-map-operator 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 rx-map-operator
   

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

   

   Figure 5.6: The rx-map-operator app running on http://localhost:4200

Now that...

Using the switchMap and debounceTime operators with autocompletes for better performance

For a lot of apps, we have features such as searching content as the user types. This is a really good User Experience (UX) as the user doesn’t have to press a button to do a search. However, if we send an HTTP call to the server on every key press, that’s going to result in a lot of HTTP calls being sent, and we can’t know which HTTP call will complete first; thus, we can’t be sure if we will have the correct data shown in the view or not. In this recipe, you’ll learn how to use the switchMap operator to cancel out the last subscription and create a new one instead. This would result in canceling previous HTTP calls and keeping only one HTTP call—the last one. We’ll use the debounceTime operator to wait for the input to be idle before it even tries to make one call.

Getting ready

The app that we are going to work with resides in start/apps...

Creating a custom RxJS operator

By following the other recipes in this chapter, I have to ask if you’ve become a fan of RxJS yet? Have you? Well, I am. And in this recipe, you’re going to level up your RxJS game. You’re going to create your own custom RxJS operator that just taps into any observable stream and logs the values on the console. We’ll call it the logWithLabel operator.

Getting ready

The app that we are going to work with resides in start/apps/chapter05/rx-custom-operator 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 rx-custom-operator
   

   This should open the app in a new browser tab. If you click the Start Stream button while you have the DevTools open, you should see the following:

   

   Figure 5.12: The rx-custom-operator app running on http...

Retrying failed HTTP calls with RxJS

In this recipe, you’re going to learn how to retry HTTP calls smartly with RxJS operators. We’re going to use a technique called the exponential backoff technique. This means that we retry the HTTP calls but with each next call having a delay more than the previous time for the attempt, and we stop after several maximum tries. Sounds exciting? Let’s get into it.

Getting ready

The app that we are going to work with resides in start/apps/chapter05/rx-retry-http-calls 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 with the backend server:

   npm run serve rx-retry-http-calls with-server
   

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

   

   Figure 5.14: The rx-retry-http-calls running on http://localhost.4200

...