Using the Interoperability API to convert Http requests to Signals

[00:00 - 01:05] Welcome to the second lesson of this module. In this lesson, we will proceed from where we stopped in the previous lesson by looking at how we can convert the observables in which we used to fetch data from the REST API to a signal. To do that, we will make use of an API code to signal. The to signal API is made available through the interoperability API. It allows us to convert an observable to an angular signal. As you can see from the code in this slide, the to signal API can take in a generic type as well as different data types. It can also take in the source, which is the data we're trying to get from the REST API. And then it's can take in an initial value as well, which can be of different data types. If you do not pass in any initial value, it's going to set the initial value to undefined by default is could have some performance implications and some instances. And with that, let's add to the just the code to work with this API.

[01:06 - 03:51] If you can recall, we have three reactive primitives and signals which are effects, computed and signal out of these three primitive. The first one I like was to work with and call that in our observations, we signal is the completed reactive primitive. I like us to use it in our REST variable to do that. I'm going to import computed from at angular code. And then right here, I'm going to call the completed, which is going to be a form of a function. I'm going to make use of a fat arrow and then I'm going to wrap everything around our environment . As you can see, we now have our first reactive primitive implemented in this file. Next up, we need to create a variable that takes in the data coming from our gates product method. To do that, I'm going to create an observable variable called products. So I'm going to say private and then it 's going to have a dollar at the end, which is a pattern with observables next up. I'm going to call observable and then passing an interface and set it to the cost to these dots gets products. Now the product holds the response coming from our API right here. So the next thing we need to do is to create our signal. To do that, I'm going to call the signal products signal and the estate is a cost to to signal, which we need to also import from the RXJS Intel. But before we import it, let me complete the configuration. So the first value, which is the source, is going to be called these dots products, which is also our observable that owes the data. And the second value is going to be the initial value, I'm going to say initial value. And then it's going to be set as an MCR array by default, we can then proceed to import to signal API from the RXJS Intel library. So I'm going to say import to signal from at angular slash four, plus slash at RXJS, plus slash Intel. So we can see the everything we've done so far. Now we now have a signal available to us in this project to make use of this product signal. All we need to do is switch streets to our product component to any product component. I'm going to get rid of this syntax because in Angela 17, we have a new built in way of writing a for loop. And that is the at four below . So I'm going to get rid of this ng4. And above, I'm going to say at four, I'm going to open a bracket. And I'm going to say products of product service dot product signal, which we just created in our service.

[03:52 - 05:23] And we're going to pass in the trap. So I'm going to say trap. And it's going to be products dot and that's for ID with that. I'm going to know when any of the items on the list changes. This is going to grab around the brackets. I'm going to grab the bracket posts after closing the right here. I'm going to create an ad MC block. So I'm just going to see at MC in case the list is empty with a just created deal that says no products available. And before we see it seems we have an error right here, which says product service is private and only accessible within the product component. So to assess this product service, we need to illustrate to our product S file, go to the top of the page and then change this private to probably I'm going to save everything with Don so far and show we have a server running straight to the browser and then refresh the page. And since we have an error, let me check the console HTTP failure response or look out hosts. I think I know where the error is coming from when we are split to the product service file. If you look at the rest API variable, we change this to one of the reactive primitives in signal. I won't think about signals are signals are nothing but a function. So at the end of this rest API, we need to add a parenthesis and then see once again, so I'm going to illustrate to the page. And as I can see, we have all our assets coming from our rest API displaying on the page.

[05:24 - 06:08] So if I straight to the product S file, we can get rid of our observable and when we save once now, an extra to the page, we still have access to our data. And now to summarize this lesson, we've been able to learn how to utilize the interoperability API to fetch data from the rest API, write less codes while trying to consume the rest API in the component and then reduce the amount of RGS observable we need to write in the templates, which helps us to limit a lot of performance drawbacks and then increase the reactivity of the entire code by relying on signals. In the next lesson, we'll see how we can share data between different components, making use of signals.