Operators

Hey guys, in this lesson, we are going to build a delay for our HTTP call in the product service. In order to do that, we need to head to the product service. And here is where we will build the logic. As you remember from the last lesson, we have seen how the async pipe works. The async pipe is part of the Angular common module. Now, RxJS has its own pipe in there. And in order to utilize it, it's as simple as just calling the pipe function. The next thing I want to introduce you to are RxJS operators. This is what makes RxJS so powerful. It allows us to easily write code in a declarative manner. An operator, in simple terms, is just a function. By using the pipe function, we can chain those operators together. For our use case, there is an operator called delay, which takes an input a number, which is in milliseconds. I will delay our HTTP call for five seconds. Let me start the app. Let's open the networking tab. Let's refresh. And as you can see, it takes a while before the results are being loaded. Although in the networking tab, we can see that we got the response immediately. And this is because we are actually delaying not on the server side, but on the client side. That's why we get the result a few seconds later. Now, let's go back and add a spinner. In the app component, I will create an else statement. And in here, I will just copy paste this Boodstrap spinner. Let me format this. Looks like I haven't set up a formatter. Pick whatever you like. And there we have it. Let's go back to our website. Refresh. There we have a spinner. And after five seconds, we get our results. RxJS has a lot of operators that can be divided in different categories. For example, creational operators, filtering operators, join operators, and all the other. So as you can see in the list here. I will leave the link in the description so you can have a better look at those. One more thing I want to mention is there is an operator decision tree, which helps you pick the right operator for the use case that you have. Let's go ahead and see if we can find the operator needed for the delay functionality. In our case, we have one existing observable. We want to delay the emissions based on the given amount of time. And there we have it. This is exactly the operator that we have used. I definitely recommend using this operator decision tree often, especially in the beginning, because the more experience you have, the easier it becomes to pick the right operator from this long, long operator list. Even after many years of experience, I still use this operator decision tree from time to time when I have a niche use case that I don't know how to handle. To recap, in this lesson we have looked at what are operators in RxJS and how to pick the right one for the use case.