Angular 4/5 HTTP GET and POST requests tutorial

hey guys in this video we are going to learn how to do HTTP GET and HTTP POST request in angular and the first thing we need to do is take the data that we have and we we need to create some sort of REST API service so we can put it on the this free online available services and then we'll write some code to fetch the data from that service we might get into some course issue Co RS cross-origin resource shark because your browser may not allow the outside access and so we need to solve solve that and by the way this is a much longer tutorial series on angular and you can follow the entire series I'll provide a link to the playlist here and welcome to texted tutorials [Music] all right so to begin with I already created an empty project using angular CLI and the name of the project is ng five HTTP GET post and I'll applaud this once I'm done with it and provide a link in the description so you can play around with it but basically if you look at the package JSON here it's created using angular version five and if you use four five or anything after this should work now before we set up our API we should prepare for it so first thing you want to do is go to app module TS and here we need to import something so we need to import the HTTP client so we would say HTTP client module from and we are pulling it from angular / comment / HTTP if I look at my package JSON here I can see it's inside the one of the dependency angular common so that's why we're putting it from now once you pull it from here I also need to add it into the in the decorator in the NG monitor decorator as a property so it's the next thing I want to do is I want to go to my main component which is my app component and I'll import the same thing here so I would say import HTTP client from at angular / comment / and inside my class here I would need to have a constructor that would inject this dependency inside so I would say constructor and inside I can say private HTTP client type this HTTP client all right so the next thing I'm gonna do is I wanna take some data which I have here it's an array of objects in each off just got ID name and age there are multiple options of all for you to put there lots of services available but one of my favorite is is called my Jason server typical calm I'll put a link in the description and what it does is basically you create your own github repo and you would on the master you would update upload this DB dot Jason fun it will be automatically available to my Jason server typical calm and so basically your username your repo would work like I can show you how it works so I've already created so here is my repo github.com tech seed get Jason faker did directory and it has a DVD Jason which is basically the profiles are three object that we saw and I can access that through my JSON server topic on comm and this would be my github and this is my repo and remember this profile if I remove this I would see his profile which has three objects if I click on here and I can actually filter it if I say one it would filter ID equal to one or I can actually do this way I can say name equal to John and it would filter named John or I can do by age equal to 31 and it would filter by age answer so we can use this URL to filter this record and use using HTTP GET so the first thing I want to do now in the HTML I want to build this user interface so I would need an input it's type text I can set up some event call key up so whenever I'm typing it would do something I can say on name key up and inside it would pass event event is nothing but whichever element that it's this element input element if I go to app component TS I can use that event which is this one and here we can say event type any and I can just say console.log event dot target dot value alright so now it's time to compile a project I'm gonna go to command line and I'm already inside the project so I'm just gonna say ng serve - - open alright so it complies on to this localhost 4200 and if I inspect element here and if I type something let's say a it's giving me a B is giving me B so as you see it's getting me whatever I'm typing here I can use this information and call it unnamed I'm gonna create a variable here call name which is type string let's set up an initial value equal to an empty string and inside I can say this dot name equal to basically whatever I'm typing the second thing I need is a button so that I can click on it after entering the name and that would do an HTTP GET so for that I need a button and inside the button oh it's just we're just gonna call get profile or something and it will have a click event so if you don't know the click event work like this so within the parenthesis you would say click and equal to you would type some method name so I can say get profile and I would need to implement this method get profile into my TS file so I would go back to the TS and just like this on name key up I will have to implement this so this is where it's going to do the HTTP GET but for now I'm just gonna say mmm console.log this dot so now I have this input box where I can say that say John and when I click on get profile I'll get John here now what we want to do is pass this information to the and make an HTTP GET request to get the profile Judy's profile or John's profile now we already have this HTTP client here inside the app component es so we can use that information and do a little HTTP GET so we can say this dot HTTP client dot get and inside we can pass that URL that we just so we have this URL and and here I can say name equal to and inside the template string I can pass this dot name so this should use this URL to query but profiles bind I need to subscribe to this so what it would do is it would keep watching whenever it gets it it would execute it so the SUBSCRIBE would work like this sub scribe and inside we would get get some object we're gonna call it data and when it gets it we can do something with it and the data would be array type and inside I can just say console log data so when it gets it it would console log it so now inside here I can say John and click on the profile and it gives me some data ID name and age now what I want to do is I want to print this age here with the name so instead of simply doing the console log I can say if data dot length which means let's say if the data if it returns some data then I want to then I want to get the age so I can create another variable here called age and that's gonna be a number and I can have another variable called found which would be boolean so we can keep track of it I want to say this dot age equal to theta dot data zero means zero element dot H and I can say this dart found equal to true means we found it and as soon as we type we can make found it with the font so we can say here they start found equal to false now in HTML here when you can put a break and we're gonna have a div where we can say if there's a found it if equal to found only when it's found we should say span and the content should be named names age is age now let's see how it works so if I say John and get profile it would say John's age is 21 if I say Judy get profile Judy's age is 31 now that we have done get less to HTTP POST but before that I request you to like the video if you enjoyed it so far you can just go below the video and like it and subscribe it if you haven't done so there's a red button at the right bottom corner if you wish obviously so now let's quickly do post so for that I am going to create another button I can just copy and paste here and I'm just gonna do something like this and insert off get profile I can say post profile and I can say post profile and I have to create this method inside so I can actually copy the get profile and rename it post profile and here insert of this dot HTTP client ID get we need to do and instead of passing the name here we should just have the up to the profile and because we are posting we need to post some data so what what is a post real I can actually create a new profile and post it and the server would save it as the new right now we have three profiles and it would create a fourth one so the way we do it is we can say our new profile would have name which is let's say call mark or something like that and his age is going to be 41 now here the SUBSCRIBE insert of array we will get an object so we can just simply say any and I'm just going to print what the response might be so I can say console.log data alright so I have this post profile and if I click post profile it would give me back the same profile but as you can see it has created a new ID so the ID is for wood trees which is a new element technically it's not really creating a new element because it's a fake profile Frank API but it gives you that it really posted it so it gives you a response back now if it's your own API then you would take the data and post it on a server side but it's not really doing it it just gives you a response that okay new ID is for its smart enough to know that you're creating a new ID okay the last part is let's say if you've done everything right but you're still not getting the response back from the server and it is because the course the cross-origin resource sharing issue because when you send a request from your browser to that third-party server your browser a need to set a one variable or sysctl allow origin to that the server name or to star which means allow any third party request from any third party server and then there are two ways to do it one would be to just ending a Chrome extension if you using Chrome and I have already have it here it's the the name of the Accession extension is access control allow origin and it basically wants you install it it will take care of it you don't have to do anything or a better way of doing it is actually using interceptor and what it does it actually the request comes through and it would intercept in the middle and it would insert this property into the header the access control allow origin and I already written a module for it and so the name of the module is interceptor modular TS and inside you have to import bunch of stuff and you would write a service here because it's injectable and the service is called HTTP request interceptor which implements HTTP interceptor and you can see what it intercepts the HTTP request and it has observable because it has to observe whenever it happens it it grabs it and what it does it the request it would clone it and it would set the header and we said this property called allow control allow origin to whichever the site that you are accessing to and it would replace the clone request in the handler and you have to import this into your main app module so I have imported this interceptor module and I also need to import it here once I do that and if I go back here to look at the response and let's say if I say John and if I click on the profile and I have to look at the network and if I look at the network what's going to the header here it's basically sending this name John out and if you look at the request header it has access control allow origin said to the the URL that we specified here and so this is need to be done otherwise it may or may not work depending on how the security settings on your browser all right so that's all folks I hope you learn something from this tutorial and if you did please like subscribe and provide a constructive card a member provide a comment thank you you [Music]

Channel: techsith

Views: 174,721

Keywords: angular 4, angular 5, angular 2017, angular 2018, angular tutorials, angular lessons, angular from scratch, angular http, angular rest api, angular training, techsith.com, techsith

Id: MN2WkxPnGTo

Length: 17min 17sec (1037 seconds)

Published: Mon Nov 06 2017