Using lifecycle methods - Angular Tutorial

- [Instructor] In order to load external data, we need to use something called lifecycle methods. That's a way to perform a task at a specific point in the application. The lifecycle method that Angular provides is called onInit. It's a way to take care of things after the component has been built, and it's a great place to load external data. Now doing this will require some additional imports because it uses some functionality that is separate from what we're already doing. We're also going to need the ability to work with ACPT verbs like get to receive the information, so we'll have to add that to our code as well. In order to do that, we're going to need to subscribe to something called an observable, which is a new pattern in JavaScript that allows you to wait for something to happen and execute a callback when that something takes place. In our instance, it will be the actual receiving of the data from the external document. So let's take a look at how that works. I'm going to go back into my app component, and what I want to do is take this data right here and extract it into a separate file. So I'm going to grab all of this right here, it's really not a good idea to include all that data in our component, we should keep 'em sort of short. I'm going to right now just set this to an empty array, and then I'm going to go into my assets folder, so right where I have my images, right click, select a new file, and I'm going to call this data.json, and then I'm just going to paste all that data in there, so we'll save that and in order to bring that in here, I need to do a number of things. First of all, is import the right parts of the library, we're going to need to do that in a couple of places. So we'll switch over to our module and in addition to importing the Ng module, as well as the forms module, we're going to import another one and this one is the http client module here, and that will come from @angular/common/http. Now just like before, we're going to need to import this into our application. And once we have that we can save this, now we can go back into our component, and we'll need to import HttpClient here from @angular/common/http. Now in order to use our lifecycle method, we're going to need to add it to this export right here, so this will implement something called onInit, and actually should be implements onInit, and that also comes from Angular core, so in addition to importing the component definition, we're also going to need to import this onInit right here, so that we can use it. Alright so we're also going to need to add this in our constructor. We're going to need to create a new variable, so this'll be a private variable called http, and it's going to be of type HttpClient, 'cause this'll get us the ability to do an http request, and now we're ready to implement our onInit lifecycle method. So it goes outside the constructor, and we call it by using ngOnInit. We'll give it a type of void, so this is essentially no type, and then in here, we can do whatever we want. And what we want to do is use the http module that we just loaded, so we'll say this is going to get an http request, and the type of request that we want can be any of the traditional requests that you do with http. So it could be like a post, or a put, or a delete, but the one that we're interested in is the get request, which will allow us to get the data file that we just created. So now I have to specify the type of element that is going to import, and I'll just keep it as a type of object, because what we're getting is essentially an array of objects, which technically would be an object, and then we specify where the data is, so that would be on the assets folder, and then it's called data.json. And here's where we define the observable. So it's going to attempt to get that data.json file, and it will subscribe to the result of the operation, which will then yield some data, and we'll use an arrow function here to push that data into a callback, and then we'll generate just what we did before this artists variable, is now going to get the data file. So if we did all that correctly, you should see the same list appear right here, except that now it's loading that list from an external file. We don't really need this initialization anymore, because we're getting that information from the file, so we'll delete that. And that's how you do, I know that's a lot of complicated stuff, and Angular does require you to sort of load a lot of different pieces, but once you understand that what we're doing here is using one of the lifecycle methods to initialize our variable that we're calling artists with the data from an external file, and although we have to use this http module, as well as the lifecycle method, you can see how Angular makes everything modular so that you can build your applications with only the pieces that you need.