Angular 9 Tutorial For Beginners #61- HTTP POST

hi friends welcome back to arc tutorials we are continuing with our angular 9 full tutorial series and in today's episode we will learn about angular http client post method you have you would have interacted with many web applications where you would have seen or used forms the forms can be of any type it can be a contactors can be a login can be a registration form in 99.99 times each of these forms will use post method the reason i say 99.99 is because you can also use forms with get method a classic example of which is google search so google search is also a kind of a form which has one input type equal to text but when you hit submit you can see the value entered which is a get so this is one of the examples so rarely you will use whenever you have search kind of thing you would use get but otherwise it's usually a post form we'll learn all about it in today's episode welcome back my name is sridhar i bring over 10 years of experience as a full stack developer i'm here to share my knowledge with you on the modern web technologies tags and i'm here also here to learn from you so during the course of this tutorial series if you have any doubts i encourage you to ask me in the comment section below i'll be happy to help you i'm putting in a lot of hard work in bringing these tutorials to you so please help me support me by encouraging and subscribing to my channel by liking the videos thank you in advance like i said this is part of the angular 9 full tutorial series we have around 55 tutorials now uh in the playlist if you really want to learn and master angular 9 please go through that list ask me if you have any doubts in those tutorials the playlist link is in the description box below so make sure you check it out all right so in this feature series um we are learning about angular http where we are learning how to make http calls make a request process the response so so far we have seen observables we have seen dependency injection services http client and in the previous episode we learnt about http client get method today we are focusing on http client post method but let me also tell you that this tutorial will make use of json server to mark our endpoint we'll use observables dependency injection http client so all of these i have covered in the previous last three tutorials so make sure you check them out in the series if you want to continue t of the tutorials just to give you a quick overview of http client http client is used for performing all the http requests and responses in angular application the http client service is available in the package angular common http in order to use http client remember that we have to import http client module without which it will not work so this is absolutely important mandatory and a lot of developers will make mistake here so make sure you don't do that all right so like i said common examples of post are login form create new user contactors these are all some of the use cases of where you use http client post method or in other words i can say that whenever we want to submit the data to an endpoint in a secure way the data should be hidden we use a post method all right so in so like i said we'll make an api call whenever we want to submit the data to an endpoint that is called the post method the syntax is the method we'll call is dot post and we have to provide two parameters one is the endpoint or the api url the other is the body we can also pass options like headers params we can also pass response type with credentials etc the response that we get from the post call is always an observable which means that we have to subscribe to it in order to process the data so that's important remember that you don't miss out on that so whenever we make any http calls via http client the response type is always an observable so we have to subscribe to it so that we can process the data in the previous episodes we learned in detail about observable how to process it so make sure you check it out if you have missed it out all right so http client post method options um we have we can pass headers we can pass params we can pass response type we'll explore all of that in detail but the idea of this tutorial is to help you make a post calls http post calls we'll do it in six simple steps right first we will add and import the http client module in our app module second we will import our http client into our service or a component wherever you want to make a http call but it's always a good practice to to do that in services because services it becomes reusable it's easy to maintain it's easy to share the methods and classes and variables between different components so we imported into the service then we inject the http client into the constructor and create an instance of it then we will write a method which will implement the post call finally we will import this service into our component class and then make use of that method so these are six simple steps we'll walk through it one by one now in hands-on uh again i'll request you the best way to to do is practice with me code with me take any example start typing code or just follow the code that i am writing just try and type it as it is so that way you get hands-on experience let's start so like i said um we will be using a mock server to use it so i am using json server uh i have covered that in the previous episode when we did http client basics also in the get method so i am using json server to create a mock server alternatively you can also create any endpoint using my maybe java spring micro services node express asp.net any language it's fine all we are requiring here is an end point through which we can hit and make a post call i will be covering uh how to install express node all that in the later tutorials but for now let's just use json server so to show you how it works first what i'm going to do uh i'm going to use a postman so this is another tool to test apis so let's first i now that i have started my server i will go to the browser and hit contacts and it will give me the list of contacts it is there so there are four contacts right now if i see my application i see there are four contacts that are returned here right so now i'm going to use postman first to insert that value so my keys are uh first name and last name so i'm going to make first name and hit send so i see that i get 200 okay 2101 which is request is created right so 200 means status okay 201 means request has been fulfilled and a new resource has been created okay so 201 is a good um feedback now so now i'll go back and request this so now you see it created a new resource with the id5 and in the ui i see the fifth record added so this is uh the post using postman now we will simulate it in our code so for that if you remember let me make some notes here for you um let me see if i have otherwise okay so let me make some notes on um http client post method right so first thing we are still using we will use use the contact uh component which we created in previous tutorial so make sure make sure you have seen and your code is up to date with it okay so so this is our contacts component let's see it how it looks so this is a simple contacts component where we implemented a get call and we are getting the details that's all simple nothing much also uh important things to note as part of that six step series if you remember i told you all of these six steps so first let me know so in app module in app module we imported http client module this is the most important thing so we did it already in the last episode but i'll show you here so you see we have imported import http client module from angular common and http and we imported that in our imports array which is here right so this is done so the first step is this is done done with the first step the second step says we need to import http client in our service so remember we also created we also created the contact service where we did a service.ts file we created a get method get method copy okay so let let me just show you here once so contact so here we see that we had written get contacts which does a headers append and it's returning the http client.get right so it is just returning the contacts so it's making a get call and returning us the details so that's all it does so let's close some of these which we don't need and yep okay so we have the get call so that's part is done so we created the import the http client you can see it here we imported the http client and we injected that into the constructor to create an instance and using that instance we are calling the get method so this is the step number two and step number 3 which is import the http client in our service and inject the http client in the constructor so this is what we had done so far we imported it and we created a instance now we will write a method which is this fourth step to for a post call so here i'm going to say create contact right simple method nothing complicated we'll keep it simple for now like i said we'll keep it simple for learning we will make complex use cases as we proceed proceed in building an app okay so the idea is to learn so keep it simple so now we are creating a method here and here we'll say first return this dot http client dot post now in post what is the end point we are doing so we'll say http localhost 3000 slash contacts right but remember get does not require any other parameter but post will require so i will say here resource i'll say create body create resource and we will pass it in the method okay so now we are saying we are creating a new and where we are saying for creating a new resource we will send the json right and that is what this is or you can say create body or whatever name you want to give right create json body or it can be any variable all we are passing here is a json attributes from the form so that's all we need from creating in the service right so so we created a method implant implemented post method parameters required are parameters required is an endpoint or a url whatever you call it and then body which is the resource for creating new one so now let's go to in template let's create the form right let's go to contacts.component and we'll get rid of it here and instead we'll just say h3 create new contact right so create new contact this is this is where we'll create a new contact i'm not going to type all of it again because if you remember we did already that in login we learned that in template right so if you remember let's close it here so we will we will reuse the template driven template driven forms or reactive forms will you reuse we will reuse right the template driven forms we we get a form object right or form data that we capture it right let me show you that first so here i'm going to go to login okay so start typing something this is password some other thing email right and you can select male female whatever that is the idea is we learned about template driven forms and when you submit it would give a form data right so let's see that once it can be anything so don't worry about it um right you submit and you get the form data right so we will use that response so we will think that we have got the response right and how do we do that in the context.ts what we are going to do here we are going to call it we are just going to sub implement a submit button right here we are going to call it and here we are going to set on click add you know contact okay add new contact right so reuse the code here from template driven forms or reactive forms right that we have already learned it right please refer previous tutorials where we created the form and form data body and captured captured form data right so this is just a pure assumption that you will know how to reuse don't worry about it don't worry if you don't get this piece i will start a crud tutorial with live example soon okay for now just assume uh that so i'm going to go back to my contacts right so i'm going to go back to my contacts and here let's give it a break okay so so this is where we will reuse that particular piece of code and we will just say that we have a method when i click on it it should create a new resource for me right so in the component i'm going to implement this method and say create or add new contact okay this is the same method which i am giving the name here on the submit button right so here what we'll do um for now i'm just going to mock that uh form data right mocking the form data that we will get from the form right so here i'm going to say new form data data equal to so here i'm going to take the same form data here id first name last name so i'm going to say id as six and then i'm going to say first name as say ht or let's say raj then i'm going to say last name okay so i've got a sample data right so now i'm saying that this is what i will get when i implement a form right and then what i'll do and if you see here we already imported the contact import contact service we created instance so let's copy this instance and we will say this dot contact service dot create contact this is a method now it takes a create body which is nothing but our new form data right and so this has got it now we will say dot subscribe since we are subscribing to it and then we will say data right and here we will say um let's say we are going to show a success message right i'm going to use ngf equal to uh message true if message to contact created successfully okay so let's take this and define it here and initialize it to false okay so we have a variable what we will do if the data is true then we will say um when the day we get the data usually we'll draw something like dot map or dot error but here i'm just capturing for now and i'm putting it message equal to true and it will be this dot okay so we will also console log dot data okay so this is what we will get from the observable that's what we are processing and we'll just show that message for now right so this is what it is i'll just open the console right so i know we are doing six things so stay with me it looks so now you see it processed and is you see here raj right so it reloaded for us and it gave us the message right so since there is a dynamic binding the moment we added it it already created it now if you go to contacts and see that we see it's the same value which we passed it here in the form data right so this is an example so classic example is how you process the data and how we process it like once you get the form data how do you pass it as part of the post and then how do you reflect it back into the ui right so this is one of the examples simple examples just get you started in most cases it will be little complicated like you will have authentication you will have bad jwt auth tokens you will have a lot of headers that you want to pass but the idea here is to get you started so start with it right so mock the form data call the http post method you should see the status uh you should see the should we should see new resource created right so that's the point that's the learning of this particular post that we are trying to add uh data using post which is what we have done it in our contact service uh so we pass through an end point and we have a json body right that we pass it from our component and in the component usually we will have it through the form data so you can have it something like um if you want to extend it you can just simply check out let's let me quickly show you how to do that as well so what i'm going to do i'm going to quickly copy the entire thing and as it is so that we faster the process in the contacts go here and here i'm going to instead of this right i'm going to implement the data so i'm going to just read the values here and so if you like i said the best way to get you started is to do a mock data all right so here i'm going to pass that data i'm going to receive that data in the form right and how do we process it form dot value dot id and we'll need first name last name and we'll need these three right so we'll need id first name and last name that we'll get from the form right now this is where i'm making it dynamic data from form so this is the mock data right and now i'm making it dynamic but if you want to it's up to you basically but usually in most real cases we'll have from the form so i'm trying to show you how to do that uh in the template go ahead and copy the form again i'm not typing it for you it would be but let me show you how to do that so let's get rid of this code here right and we'll have a form and we will close this form here and we'll need three input types and we'll need a button right so we will have our form here right uh input type equal to text input type equal to text this i'm going to call it first name similarly i'm going to call it last name right and i'll say this also is required and i'm going to create one more id here and i'm going to call it id right so all three fields are required and i will put some validations again we have done all of that in the form tutorial so i'm not really going to do that here um so instead we'll just copy from there it makes it much easier to just copy paste so you have the disabled login form this form should be the same name um so i'm going to say add new contact form copy the same name copy the same name and i'm saying we'll remove this now because we don't need that uh add new contact so if you see this is a template variable and i'm saying it's an ng form so similarly you have to pass the same name here in the submit form and here we the name was add new contact right add new contact we have id we have first name we have last name we have a button right let's see this in action so this is what it is instead i'm going to class equal to container i'm just beautifying little bit so it's much readable right so maybe i can throw in a quick forms to style it up again don't don't try and type it yourself try and use it as much as you can so that way you know copy this form so don't try um because the idea is to learn here and i'm doing it since i know it for sure um so you guys may take time uh take it easy even if you don't see a beautiful form it's okay for you um the idea here is to learn so focus on that part only and i'll copy these variable names put it to okay so or rather let me let me keep it simple for you so what i'm going to do i'm just going to copy one form and i'm going to modify that here just copy this and put it here i don't need any help text for now and we'll do the same for the three right okay so our other way of doing it is you can create this form beforehand and come prepared if that helps you in any way all righty so here i have my div container i have my three labels so i'm just going to move them into respective okay so we are moving them here and here i'll say enter last name sorry friends i'm just trying to uh make it much beautiful so you get an inspiration otherwise we could have just started coding but it's good that you know we want to see it beautiful form so you get some motivation i think i'm sure you're following it okay enter id now we have form first name and we have our form ready so if you see here now we have a little beautiful form then previously what we had right we have enter id enter first name enter last name and we have the disabled submit button okay all right i'm just giving some empty so we have some space okay so we have this frame let's fill that now so we have the form let's collect it here go to component we are getting the form and we will copy this and now make it dynamic so here i'm going to say form dot value dot id form dot value dot first name and then i'll say form dot value dot last name so see now my json object has become a time dynamically uh new which is coming dynamic values from there is no more static value it will come from uh the form itself right so let's test it out so i'm going to add six and i'm going to add say suresh i'll say ramesh i'm going to enter okay looks like there is some issue let's see it should okay there is some error let's see okay so i get the values but there is some error which says http failed request with status 500 okay okay let's see that data now why it failed okay so it made a request it made a request and it failed let me clear the network tab now so it made a request and we are getting 300 contacts internal server okay so 300 internal server let's see that why it failed um so what we will do here first uh let's see what data was sent right uh we have we can see the data it says id6 first name last name right and the value that we require is also first name our ide is small okay first name last name and it should be contacts and let's see why it failed uh suresh okay we got the view source okay so then we have to send the headers also right since it's an encoded url uh where we are saying that it's a of type json so we need to put some headers here now so we can go to our component service or contact service and just like how we appended before we can use the same and we will say let's pass them again to the um here we can pass the options so we'll say headers equal to http headers okay so let's see now it says 304 let's build it let's take the form again and say 7 test test let's enter okay it still says 201 so which means it's created now it's reading the data so we should see test here right so let me show you that again so here now we are going to so what was missing was content type slice json was missing so i added in the headers and it worked so let's try it here let's say mark so i'm hitting enter now you should contact created successfully and now it will reload and we see mark added here right so that is how uh this entire output has worked for with http client post where we have seen uh how to do it with static code and how to do it with dynamic code right and we have modified our contact service to also pass headers where we are passing as application json we are passing the dynamic data and we will we are updating the view based on it now similarly if you go to contacts you should see that these are updated now with eight that we added right that's what is reflecting in our list of contacts so this is a classic example of how you go about business in terms of using a http post now i will request you take it slow since we have covered we have covered quite a lot of things a lot of concepts in this tutorial then i would say slow down and start typing or slash slash recording step by step start with mock data first and then grow into building a form and then make it a dynamic form creation right so the important thing here is have patience um buzz me if you see any issues with your code i will jump in i'll help you meant to help you right thank you so much for joining in today's episode it was awesome coding today uh in next episode we will extend something similar on the same lines it would be same uh so we'll where we will learn about http put endpoint thank you so much for joining i hope you learned from this do share your feedback on this tutorial tutorial and i am waiting eagerly to hear from you on your comments any queries any doubts i can't wait to see what you have built thank you so much

Channel: ARC Tutorials

Views: 20,001

Keywords: Angular 9 tutorial for beginners, angular 9 tutorials, angular tutorials for beginners, angular interview questions and answers, angular live projects, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular http post tutorial, angular 9 http post examples, angular http post form data

Id: jvMbKG2GLLI

Length: 34min 32sec (2072 seconds)

Published: Fri Jul 10 2020