Angular 10 Tutorial #75 - HTTP POST Tutorial | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in today's episode we will learn about http post method whenever we are trying to create a new resource at the back end so we use post method take some examples like login create new user create new lead create new contact anything that you create or add new will most likely include http post the difference between http get which we saw in the last episode is that the data is visible in the url whereas whenever you submit a data using post that is hidden and is temporary in your browser we will learn all about it and its implementation in today's episode welcome this is part 75 of the angular 10 complete tutorial playlist i have planned more than 100 tutorials for you in this series including a live project slowly you will see that we are stitching all the examples that we learned in previously in the series slowly they'll be stitched together so make sure that you go through all of the playlists so that you understand and learn entirely the functionality that i have taught in entire this playlist i have covered from ground up from scratch to most advanced use cases so make sure that you check out everything so that you can learn and master angular alright so if you have any doubts in the following things that we have used so far please do drop me a note and i'll be happy to help you today we are in 75th episode today we are learning about http post let's get started a quick note to our viewers who are joining us new in this particular episode earlier during the last two two episodes we learned about http client what is http client it is used for performing http request and responses http client service is available under the package angular common slash http to work with http client we need to import http client module which is mostly or usually done in the app module http client allows us different functionality like headers params interceptors etc we will learn some of them in today's episode as well so what are we going to learn at the end of this tutorial at the end of this tutorial you would be learning how to make a http call you will also learn how to make call of http and pass headers you will learn how to pass params sometimes you will require you will be required to pass some parameters along with the post url we'll learn that as well and finally we will learn about how do you pass subscribe and catching the errors for processing let's get started we have a lot of work to cover the ground all right so these are some of the notes i made for you for your reference later but i will start with the hands-on coding all right so what we are going to do if you are following along you would see that when we learned form angular forms we created a simple form using template driven form and also i have shown you how to create reactive forms right so i will be using one of the example which is add customer which we did using template driven form so if you are not sure how to get this code please refer to the tutorial i have added that link in the description box below so that you get this component to give a overview i've created a component which is add hyphen customer in the form it's nothing complex let me show you the output first here you have a simple form which has which has just three simple fields i'm not styling it now so that it's easy for you to understand but if you want you can always style it using the bootstrap or any form input okay so you can use it using any classes or styling of bootstrap or material design that's irrespective of the design i have three fields input check boxes select drop down and a text area you can have any different types of input that you want to use i am using template driven forms which means here we are using two-way data binding which means we will be using banana model of ng model to bind the data so that we can get the form that's why for each of the input or the input form element that you are seeing you would see ng model here and we are saying that this entire thing is a form using ng form right like i said i have covered this in detail in the template driven form i will not go there instead i will focus on http post method here in this tutorial so we have a simple form here and we are going to capture the data and call the http method in the temp in the component.ts i have a submit button which is add customer and if you see nothing fancy we are yet to do it which is i'm just console logging the value we get from the form let's see this functionality before we start our post i'll go to console i'll clear it and i'll stay here i'll enter some details like youtube tutorials accept the terms give some value some more testing values and click on add customer when i do that when i click on it i get the form data captured so now we will use some of this value to call the http post method now the first thing we have to do is inject the service that we want to use and our service name is user service from slash dot slash services slash user service all right and then inject this into the constructor here and make it private and i always suggest that make it small case so that you know that this is a service now we have injected the service but let's go to the service definition and we need to create a new method here in our service file which is user.service again if you're not sure what we have what we are doing here i recommend you that you see couple of last two episodes that's where i've shown you how to achieve that so we are going to say add user as a method and we will pass some body all right so what is this body going to have this will have the data that we want to submit to the backend api we already have the http injected so make sure that you check it out because you have to learn it in continuation you cannot skip it so that's very important that you continue learning otherwise you might miss out so what i would suggest is before you come to http post please refer to last two videos in this series where i have taught you about services we have i've taught you about http client and i've shown you how to do http get it's important that you learn in continuity that's where you will be able to relate and work much better so with that understanding that you have gone through these episodes you would have the base so we will use this dot http that is the http client instance and we will say dot post now post requires us to pass two things mandatory one is the url the other is the body right so in the last episode i showed you that we are using a fake online apis for a purpose so if you go to the resources let's say users so this is the users now we are going to go to the docs and go to documentation and you will be able to find the details of it right so what we are going to do here if you go here and see post right so you can see all the guide here so let's go to the post method okay so it says if you want to create a new resource put the url in our case that url will be users okay and then we have to pass the body which is the data that we want to update so let's say this is the body take that and i'm going to construct that here and i'm going to say const post body post body is equal to i'll create that json object here like this okay now we will send some of the details here so i'm going to say body dot title the one that we will send from here and body dot body dot dot i am going to say description and these are again whatever we want to pass right you don't need an id so once you do that you would get the id back so save it and i'm saying that i will send this as the body to the post method now let's work on setting up this in the component so for that we will have to go to add com customer and here we have injected the service in the add customer method i will say this dot user service dot add user and it will tell me that it requires the body to be sent so let's fix it here we are getting the form value so let's form that data here in the instead of you doing it here we can always do that right in the component level here so here i'm going to say this dot form dot value this dot form let's see the data first what we have and we are going to pass it so let's comment this for just a minute now come back here to our application and enter let's say this is title this is title field this is description and select some package and add customer so you can see that we are capturing first name and description as the field so i'm going to copy that here and i'm going to say here form value dot first name and here i'm going to say description form value dot description now the always it's a good idea to before you send data always make sure that you have that added so so here it should be value dot description always make sure that you check what data you're sending that way your the bugs would be like less the number of defects that you will end up will be less so here you have the body and not the post body so let's replace it here for now and it should be good we are trying to capture the data so i'm going to call this youtube angular series and i'm going to be lazy so i'm just going to copy paste it here take this data add customer and we'll see that this is the data we are going to send beautiful so now we got our data captured in at customer.com so what we are going to do now comment you can take this out now we are going to pass this to our post body here so we are calling the method which is in the service we are passing the real-time data that user will submit from the form and capturing that value using form value dot value that's the name of the form we have given once we have done this we are calling the add user method passing this data all right now like and what we need to do since it is a service right so we can always now let's call this here in the user service and return this right so we are doing a post and we are returning the response that we will get from the url now in the ad customer component in the at customer component since we are getting the data as observable we will need to subscribe it go to data and always good idea to capture the error logging console.log unable to add user and once you get the data console it and see what data you're getting all right so that's all we have to do here if you want to specifically mention what error then you can always specify error also all right this is good let's roll and see what happens here so this is the title field the data we are expecting back is the resource gets added and we will get an id back let's add customer and you see that we got an id which is 11. see our request did not had the our request did not have the if you see here we are doing post method to the url and we are sending the data here if you see we are sending only body and title if the request is successful which is status is 201 that means it created 201 means the resource is created and we are getting back a response which is with id right that means the post was successful and we are getting the data back and we are console logging it to extend this you can go here and similarly just like how we did for get we can pass some because let's say headers you want to pass you can say http headers and you can say custom headers dot um you can you can set or append but i usually encourage people to put everything in one go that's why you are sorted on your say authentication key some value right so you can pass this also because just like get you can pass options here and say headers and passing the custom headers here as the headers right so now we can see that in our request when we submit testing title and select here and select the value click add customer and now you can see that we are passing that as the request header here right so this way you're passing the custom headers to the post method this one now similarly you can pass the custom parameters as well sometimes you might want to send those again it's not mandatory but there are use cases where you might want to send them so what you'll do you'll write http params and then you will say dot set pass the pattern name let's say user role and you can pass anything here these will be the url params that you can see it in the url and you will pass them also again as part of the options and you can say params and you can pass your custom patterns to the post method again this setup requires you to check what api is accepting but this is what you would do mostly title is here description is here and data and accept and click add customer and you can see that now you are sending params also along with the post in the post whatever you submit will be secured but the url you will make it visible okay so this is 201 that means it's successful in the preview you can see we are getting the id back now so what we learned here is we have learned how to use post method using the form which is in our ad customer we are capturing the real time data and sending it to our method via service which is a post call we are subscribing to that data upon successful will show this there are different ways to show the mechanism like for example you can say here div and say ngf is created is user created if user is true then show message and say class bg bg success background success and then you will say user added successfully and you will have this boolean value defined in the add component add customer component and say this is of type boolean by default it is false and you will say if data is true then you would just say this dot equal to true okay so we got the data if it is true we will see the message now so title or we can give some meaningful name we say learning app is the title and say premium some description and say add customer and now you see the message comes user added successfully right so that's how you know that the user data was sent we got the id back we see the params are sending correctly it is statuses 201 and we get the request payload we can see what data was sent which is the dynamic data we just created and last thing check you will do is whether headers are being sent so that is all you would do to post the data using this service http get method so again you can typecast it by default it is observable object if you want of a certain type you can say that i am expecting user of a certain type and use this also to to data typecast it right so what did we learn today we learned about the post method we learned how to pass data via form and dynamic data second simple post call post method we learned post with headers post with params we learned to subscribe the data catch the error and last learnt how to typecast the data for interfaces right so if you do this well you will all be sorted at least you will be better positioned to start integrating any or all of your applications post method requirement which is whenever you are creating a resources using the backend api i hope it's clear to you do let me know if you have any doubts if you like my work please do consider buying me a coffee at buy me a coffee.com slash arc tutorials also i welcome you please do post any if you have any questions queries or doubts i'm here to help you thank you so much for joining see in the next episode i will walk you through how to implement a put call put call is used whenever you want to update the data or an existing resource via backend api join me in the next episode we will learn about http put method thank you so much for joining see you in the next episode

Channel: ARC Tutorials

Views: 4,801

Keywords: angular http post tutorial, angular HTTP POST example, angular POST http tutorial, angular http example tutorial, angular httpclient tutorial, angular httpclient module tutorial, angular services tutorial, angular http tutorial, angular http client module tutorial, angular httpclient example tutorial, Angular 10 Tutorial, angular 10 crash course, angular 10 full course, angular full example, angular 10 beginners tutorials, angular 11 series, angular services example

Id: uoZ2MdD-xLc

Length: 20min 58sec (1258 seconds)

Published: Sun May 02 2021