 Hello, this is Christian, welcome to Angular. In this video, I'm just going to do the read or the get request method to fetch data from a remote site. The get is the R in the cloud operation as you see here. And so here is our scenario, we got a fetch data from a remote site to the get request. We send data over here to the service, we inject that service to a component. That component will consume that data and display it to the browser. So let's go and take a look. And here is our app, we're going to populate this data here with the read. And the data we will see will look identical to what you see here on this app here. Okay, this is the app we've been working on. But this time we're going to get data from a server instead of the local file. So let's go to our code and see that's running. So last time we added already the service, we got the flight service already, it's going to this endpoint here. Okay, so we're going to do the get operations. So we're going to do the get all and get one only. All right. Let's see. Well, yeah, the get one, we'll do it in a different one. But the get all is the one that we're going to do in this video. Okay, so now let's go into the flights. And then the flight list, this is what the read is. So in here, we're going to need this and also the template here. So the template is already set up for us, we just need to get the flights information. And, and the link is already set up as well, as you can see, it's going to go to the edit page for this for the different video. And also a delete button here would also be need, we need to do that later as well. But let's go into the code here. So the first thing is we do inject the service into this component. And you do that by injecting right into the constructor here, we need a di token, again, token just really just a parameter that we pass into this constructor of the type of the service. And so have a private hour is ours called flight service, it's going to be flight service. That's the one. And this is how you inject this service into this component. Okay, you have to through the injection through here, okay, you cannot just like put out here and and use a few that way doesn't work, you have to inject it to the constructor this way. And this is how we do the injection. And you're not limited to just one, you can inject as many services as you want. You saw earlier, the other one, we injected the HTTP client, right? So you can do that many, many here as well. And we do the edit, you see that we're going to inject two of them. Okay, so we got that in here. So now through this service, flight service token, or this object, we can connect and load the functions from the other from this class, right? So now, so I'm going to import the flight class as well, because now it just say empty here. I want this to say of type flight, okay, like this. So we got the class comes in here already. And then it's going to be a list of flights. So not just one, but would be of it's an array, right, of flights. And then we'll initialize this, the init here, we're going to call a, I guess I'll call a function down here. Maybe I'll call it load data. And then this load data will do the fetching for us. All right, so now this is we're going to make that subscription call. If you have to subscribe to it to make sure it reloads. And we do a read, sometimes you may not do that, but it may work, but it's going to be like it's here to miss things. So to guarantee it works, you have to call this, it is subscribed to that service. So here we go, we have this flight service right here, oops, flight service dot. And we see all these services that we have, right, the add and lead and also on, we need to get the one as if get flights, the plural one. Okay, if you just do that. And remember, if we turn something, so if I, if I do this, this that flight equals that, I mean, that may work, right, or may work, may not. And so this is not the way to do it. Instead of doing this way, we call the function. And then we have to subscribe to that using this chaining method here. So you can do right here on the next line like this. Or usually if it gets too long, you could just break that input into the next line, you type it over like this. Okay, so we know it's part of this function here. So the subscribe takes three parameters. The first one is a function, usually a function called next. And what that does is actually that function inside the function, you will return the actual data that you subscribe to. In this case, we're interested in the flight information that's coming through this function here. Okay. So here you would do a, so the first is the actual data. And then the second is, as you can see, the error, if there's any error, you call that. And then the last one is to complete when when it's all done, you can call it complete and to perform some other operations like, you know, confirmation, or whatever, right. So otherwise, you don't really need it if you don't want to handle those. So for us, you could do the error, but I think I'm just going to do the real simple one. We'll just get the data, right? And so here you can use the function, or it's going to be real simple. So just use the error function. And I'll say, Oh, actually, I need to also do the count here, right? Update account. So let's do, do like this in multiple lines. Say data is equal to the error function, the lambda function. So inside here, we do two things. One is we set the flights to this data, whatever this data is, you can call it a one ABC doesn't matter. Okay, just a variable name. But it's commonly called data because usually that's the data or call object doesn't matter. So say this flight is going to be assigned with this data coming in. All right. So that's the flight, we expect that to come through. And then also, now we want to do the count. So this count is assigned with the, you can do data that length, or to be more correct and say this flights that length, just make sure it really is a part of the data already. So, so that's what we do. That's all we do here. And then that's it. So make sure you subscribe to that service. And because we're doing this way, because it's being called asynchronously, as soon as you load this component, you know, way even before instantiation here, all these code are here will run. So that means this flight will be already run. And this blank data will already be passed to the template here. And so if you don't, you know, set up to be a this data type, then over here, this will fail because, you know, it needs these already right before we even run. And then later on, like couple ticks later, ticks later, right, when the data actually came through, then it will re-render again, pass data again to replace this actual data. Okay, so that's why we need that here. If you just do like, you know, like that, you can see that if I do this, it won't work because you don't have any of those objects to fill these properties, airline flight number and so on. So it's really important to make sure we have that data type like this. So that because our class is already have all these properties. So let's say that is, let's hope this works. And then we initialize this, I'm going to load that data. Okay, you call that, and it updates the data, the flights becomes active. And then it goes over here and populate this with a loop and shows the information here for us. And let's hope that this works. So let's go and save this. And now I need to go over to the other app and run our Django application. So let's go and turn on Django here. I'm going to go into, yeah, the VNV and I'm going to go to the flight scheduler. And we'll do a Python manage run server. Okay, so I think I set up to run port 8000, as you can see here, right? So if I go ahead and click that, and you see that it's over here. So I need to go to the slash flights. Okay, so these are the actual data that's come through. And we had only 10 in the data here. So if I press F12, and go to network, press all here and do it again. And inside this object, flights, you see this is the JSON data comes through, right? So I have 10 schedules here, all this information is going to be fetched through that. And then later on, we want to grab only one item, you just pass an ID of three, you get that single flight. Okay, so make sure this is running. If it doesn't run, it doesn't work. Okay, so I'll just close this. Now we can leave this running, but let's hide that. Okay, so now let's go and check out app to make sure it's loading some data. So over here, and it may not work, but we'll see, go over here, go to flights, and show, and there it is. So it's populated with the data. This is live data from the server. Okay. And so we have 10 of those data set, and we are good to go. So in the next video, we'll be doing the other operations like the delete and edit, and we'll add a new flight as well.