Sending a Post Request | Angular HTTP | Angular 13+

in this lecture you will learn how to send a post request to the server from our angular application now we usually send a post request to the server when we want to add some new data in the database let's learn how we can do that in angular here i have created a new angular project called angular http request i will share the link of this project in the description here let's go to source folder and let's expand this app folder and let's open appcompanion.html file and here you will notice that i have already added some html and this is how the web page looks so in this web page we have a form and we have a table using this form we will create new products and in this table we will display all the products now currently this form is a simple html form so if i go back to vs code you will notice that this form is a simple html form now what we are going to do is we are going to convert it into a template driven form and to do that on each of these input elements the first thing which we need to do is we need to specify the name attribute so here for the first input element let's call it maybe we name okay so product name in the same way let's specify a name for this description so i will simply call it description or dsc and in the same way here also on this input element let's provide a name and let's call it price so this is the first thing then another thing is on each of these input elements we also need to use ng model so i will copy this from here and i will add it on other input elements as well and to use this ng model we also need to specify it inside this imports array so here we need to specify forms module and to use this forms module we need to import it from angular slash forms all right now what i'm also going to do is on this form element i'm going to specify a local reference variable and i am going to call it maybe products form and to this i want to assign ng form now we have already learned what this ng form is in our previous lectures all right now on this form i'm also going to bind the ng submit event and to this ng submit event i'm going to assign a method and let's call this method on product create okay so whenever this submit button will be clicked this add product button this ng submit event will be raised and when that event is raised we want to execute this method and to this method we want to pass the ngform object and we are storing that ngform object inside this products form variable right so let's pass it here now this ngform object is going to have a value property and that value property is an object and in that object we will have these controls as its properties right so in that value object we will have a property called p name this description and this price okay so here we basically want to pass that value object to this on product create method now let's go ahead and let's create this method in the app component class so here inside this class i am going to create this method and we know that for this method we are going to receive an argument let's call that products okay so here we are specifying a parameter called products and this product is going to be an object so to this products parameter we are assigning the value object of the ng form object right so that object is going to have a rename property of type string it is also going to have a description property of type string and it is also going to have a price property and it is also going to be of type string so these properties are nothing but the names which we have specified for these input elements so we know that in the value property of ngform object a property with the name of that input element will be created and the value which we enter in that input element that value will be assigned to that property right we have already learned this all right now let's go back to our app component class and inside this method just for testing let's go ahead and let's log this product the value which we are receiving for this product's parameter let's save the changes let's go to the web page here let's open developer console let's clear everything let's enter some value in these fields and let's click on this add product button and when i click on this add product button you will notice that an object has been logged here and this object has this description property this pname property and this price property and these properties are assigned with the values which we have entered in these fields now here we don't simply want to log the values which the user has entered in these fields instead we want to send a post request to the server and with that post request we want to send these data and using these data we want to create a new product in the database so in the last lecture we created this database in this database we want to save these products for that we need to make a post request now in angular no matter which type of http request you are making the first thing which you need to do is in the app module you need to specify the http client module and to use this http client module we also need to import it from at angular slash common slash http okay so this is the first step then we need to inject an instance of http client in the app component class because here only we want to use the http methods for that let's go ahead and let's create a constructor inside this constructor let's go ahead and create a private parameter let's call it http and it is going to be of type http client and to use this http client we also need to import it from angular slash common slash http and remember this this http client is different from this http client module so here it is http client module and here it is simply http client okay so here in this class we are injecting an instance of http client and we are storing it inside this http parameter now since we have used this private keyword in front of this parameter behind the scenes a private property with this name http will be created and we can access that property using this keyword so inside this method let's use this dot http dot and on this http we have different types of methods like delete get patch post etc so to make a post request to the server we can use this post method now this post method takes several parameters and the two required parameters are the url and the body which we want to send with the post request for the url in the last lecture we created this database right and here we get this url so for the url we are going to copy this url and we are going to use it so let's copy it from here and here let's use single quotes and inside that let's paste the url and after this url we are also going to specify some value so what i'm going to specify is products dot json what this will do is in the database it will create a folder called products and inside that folder all our products will be stored here you can provide any name and with that name in the database a folder will be created now here since i want to save the list of products that that's why i have called it products all right then the second required parameter of this post method is the body and here we want to send this products the data which we have inside this products object now this object will be automatically converted to the json object by this post method that's because we cannot send a javascript object in the body we can only send the json object the json data so that's why this post method will convert this object this javascript object into a json data and then it will be sent with the request all right with this let's save the changes let's go to the web page let's go to our app and here let's see if the request is getting sent or not so here what i'm going to do is i'm going to go to the network tab let's clear everything from here let's enter some value okay and let's click on this add product and you will notice that there is no request which you see here which has been sent so in this network tab we are not seeing any request that's because this post method returns an observable so here you can see it returns an observable and in the observables lecture we learned that an observable will emit the data it will send the data only if there is a subscriber to that data if there is no subscriber then the observable will not emit the data right so here the observable which this post method will return it does not have any subscriber and since it does not have any subscriber this request will not be sent and we will not get any response if there is someone who will use the response in that case only the request will be sent and we will get the response so here what we need to do is we also need to subscribe to the observable which this post method will return so let's move to next line and here on this post method let's also call subscribe and to this subscribe method let's pass a callback function and this callback function is going to receive the data the data which this post method will return so basically it is going to return us the response let's call it res okay so here we are sending a request and for that request we will get a response and that response we will receive inside this parameter now let's go ahead and let's simply log that response okay with this let's save the changes let's go to the web page let's clear everything okay and now let's go ahead and let's send a post request so when we click on this add product button a post request will be sent let's see that let's click on this button and here you will notice that there are two requests now why do we have two requests here well this is just a default behavior of browser when we send a post request the browser always sends to request so the first request here if we go to the headers this request is of type post and if we check the second one it is of type options so this request was sent first and then this request was sent now this request is of type options and this is another http verb and this checks if the post request is allowed to be sent and if it returns a success response like we are getting here in that case it will send the actual post request and here that post request has been sent now if we go to the database here you will notice that a folder called products has been created in that folder we have another folder with some you know unique id and in that a product with the description name and price has been created so in this way using http post request we created a product in this database let's go ahead and let's create one more product so maybe laptop let's say lenovo laptop and for price let's say 13.99 let's again click on this add product let's go to our database and here you will notice that now we have two products so this is how we can send a post request to a server from our angular application using this post method now to this post method we have passed two arguments the first argument is the url then the second argument is the body which we want to send with the post request then it also has some optional arguments some optional parameters so the third argument which this post method takes is the header using this parameter we can set custom headers let's see how to do that so for that let's go ahead and let's create a variable here let's call it maybe headers and to create a header let's use http headers class to the constructor of this http header we can pass an object and inside that we can specify our custom headers as a key value pair so for example let's say the key is my header and let's say the value is maybe procademy okay now we want to send this header with this post request for that here let's use the curly braces then let's say headers and to this let's assign this headers let's save the changes let's go to the web page let's clear everything here let's add a new product maybe tv and let's add the price let's click on this add product so this request is the actual post request as you can see here now if we go to the headers of this request so here we have the response headers and here we have the request headers and in the request header you can see that here we have this header my header with this value procademy so in this way we can also pass custom headers with the request by passing a third argument to this post method all right so this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 42,054

Keywords: httpclient, http post request, angular http, angular angular tutorial, complete angular course

Id: oTObLWih_EA

Length: 16min 56sec (1016 seconds)

Published: Thu Apr 21 2022