Now that you have had your first introduction to Reactive Programming, RxJS, and the use of the observer pattern and how Angular leverages the observer pattern and supports Reactive Programming, let's move on to our very first exercise to get our feet wet using the observables in Angular. In this exercise, we're going to update our services to make use of observables, because when we move on to the next module where we will look at HTTP support in Angular, we will immediately understand that HTTP support in Angular is based around observables. So, it is a good idea for us to get ourselves acquainted with using observables in this lesson itself. So, we will update the services to export observables. Thereafter, within our components, we will subscribe to these observables and obtain the data required for rendering the views. Let's go on to the exercise next. You must be wondering, how do we make use of RxJS within Angular, and is it already available to us? So what you will notice is that with the Angular CLI, when you scaffold out your Angular application, RxJS is automatically included in there. So, if you go to the package.json file, you would notice that within the dependencies, the RxJS library is already included within your application. So, whatever you need to use from RxJS is already available to you. So we can go ahead and use the RxJS library right away within our Angular application. If you are building your Angular application from scratch, then you need to explicitly do an npm install of RxJS. Going to the dish.service.js file, let me first import the of from our 'rxjs' observables. We will also import- Now, when you use RxJS within your Angular application, the entire library doesn't get included. You can only import whatever parts that you need from the RxJS library, and then use it within your Angular application. So, when your Angular application is finally prepared for deployment, only those parts from RxJS that are required will be included within your Angular application. The delay operator. The delay operator enables us to delay the emitting of the item from our observable. Going into the methods, we will now update these methods to make use of observables, and we will return a promise by converting the observable into your promise using the toPromise operator. So, if you are already having components that are using promises, and you want to not modify the components, you can simply convert an observable to your promise and then send the promise over to your components. As we realized, promises will emit only one item, whereas you can see that observables are based on streams. So, that's the limitation that you'll get if you just use the two promise operator on observables and make use of it because the toPromise operator will enable your observable to only emit one value. But for the moment let's do it as the first step before we move into the full observable implementation of our services. So, going to the getDishes method, I'm going to return these dishes. So, I'm going to remove that part and then say, return of. If you want to emit only one value from your observable, you will use the of method, and which will take in whatever value that you want to emit in there. That suffices for our current application at the moment. So, we're going to make use of that, and also we want to delay the emitting of the value by two seconds. So, I'm going to change this part of the code to use the delay operator for my observable, using pipe. I need to convert this toPromise and emit the promise. So now, my getDishes method is updated to make use of an observable, and then convert that into a promise and then send out the promise to my component. So I don't need to do any updates of the component. Let's use the same approach to update the remaining two methods of my service here. So I'm just going to copy this part, and then update that part, then take the delay part of it, and then update this part to use the delay and convert this toPromise method. So with that, my getDish method is also updated. Let me do the same thing to the getFeaturedDish method. Again, if you want to, you can type out the whole thing. I'm just being lazy to only cut and paste and change the parts that I want to change and convert this toPromise method. That's it. My service is now updated to return promises from an observable here. So, with this update, my dish service is updated to make use of observables rather than directly using the values. Similarly, go ahead and update the leader service and the promotion service. You would now notice that I have already updated the leader service to make use of observables. Similarly, I have also updated the promotion service to make use of observables. Save the changes and let's go and take a look at our application. When you go to the browser, you would notice that your application performs exactly the same way as before and fetches the data from the services just like before. So not much of a change within your application as such. It performs exactly the same. So, notice that by substituting your promises with observables, there hasn't been much change within your application as you expect it. Now, let's go one step further. We will now let our services return observables, and we will update the components to make use of observables. The reason as I mentioned, is because when we update our services to use the HTTP service to go to a server to fetch the data, then we would note that in Angular the HTTP methods will return observables. The services can simply pass the observables on to our components and let the components subscribe to these observables and make use of the data that they obtain thereby. So, this would be an intermediate step for us to get to that stage. We will get to look at HTTP in the next module. Returning to our services, you can now remove the toPromise first by removing the toPromise operator because we don't need it anymore and then we will simply remove the toPromise from this, import observable and then instead let our method return observables instead of promises. So as I mentioned, whatever a promise can do an observable can also do. So, let's update all these to return observables. Do the same to the remaining two services. You would now notice that I have also updated the leader service to simply return observables instead of promises, and also the promotion service has been correspondingly updated to return observable instead of promises. Now what this means is that we need to go and update our components to make use of observables rather than promises as we did earlier. Now for promise, we saw that we need to use the.then to get hold of the result when the resolve of the promise is executed. With an observable, the.then gets converted to.subscribe. The way you consume the data will remain exactly the same. So with that minor change within your components, the components will now be able to handle observables rather than promises. So, going to all the four components that make use of the services, first, let's go to the menu.component.ts file. In the menu.component.ts file, you would immediately notice the red squiggly line there, under the then obviously because we are not returning a promise. Instead we are returning an observable. So just convert that then to subscribe and that's it. Your menu component is now able to consume the observable values that is being emitted by the observable. Do the same change to the about.component.ts file, the dishdetail.component.ts file, and the home.component.ts file. After updating the remaining component Tapscott files, let's go and look at the behavior of our application in the browser. Go into the browser, you will notice no difference in the behavior of our application. This version of our Angular application is updated to use observables instead of promises. So, the home component here, about component performs exactly the same way as before, and the menu component does exactly the same thing. Also the dish detail component will behave exactly the same way as before. With this, we complete this exercise. In this exercise, we took our first steps towards using observables within our Angular application by updating the services and correspondingly the components to make use of observables in place of promises. This is a good time for you to do a git commit with the message RxJS part one.
