Angular 9 Tutorial For Beginners #64- HTTP Headers

hi friends welcome back to our tutorials we are continuing with our angular 9 full tutorial series and in today's episode we are going to learn all about http client headers headers are extremely important in communicating between client and server they carry the metadata of the request that we are sending from client to server common examples of what you have seen it in headers would be authorization content type etc we'll learn all about it we will do some hands-on welcome back my name is sridhar i have over 10 years of experience as a full stack developer i am so excited to share my knowledge with you all of you i'm also here to learn from you all during the course of this tutorial series if you have any queries any doubts just 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 for you so i'll really appreciate if you can support me by subscribing to my channel and liking the videos thank you so much in advance this is part of the angular 9 full tutorial playlist where we have more than 60 plus tutorials so far and the playlist link is in the description box below make sure you check it out if you really want to learn and master angular 9. in this mini series we are focusing on angular http we have covered about observable dependency injection services http client get post put delete and today we are learning about http headers make sure it's important that uh today what we are covering is is some of the aspects which we have covered in earlier uh episodes so make sure that you have covered the previous episodes in order to continue the learning session before um we start with http headers a quick note on http client a lot of developers make mistakes here we perform all the http requests and responses using http client now http client is available in at the rate angular common http package a lot of developers miss out on including the http client module and that's why they see errors so if you really want to work with http client you have to import http client module make sure you include that in your app module so that it's available throughout the app now talking about headers so we can send headers through our http calls headers contain the important metadata or the information which through which client and server endpoints communicate and they have interaction and they have the contracts in place important thing that you have to remember you have to understand is http headers are immutable which means you cannot modify them right so it's extremely important to know this a lot of developers will make mistake here they don't see data getting updated and they complain about it so the fact is you cannot modify the http headers they are immutable objects however you can do a workaround which we will learn in this which is through copying the object right so you can copy the entire values and create a new instance we'll see that how to do that but that's heads up for you and some of the examples that we see in modern applications are in headers we pass authorization we pass content type etc these are two common things that we see in modern applications there are many of course and we will also see how to send few uh we can also send some of the custom headers that also will learn now just stay tuned for that so uh http headers can be sent with post get delete port so you can send it with any http call method so we defined our http headers using http c so it has seven methods that we can operate upon append has get keys get all set and finally delete so these are the seven methods that this particular class supports now http headers are immutable i told you so this is how we will do right we'll define a variable and then we will create a new instance of that class http headers and then assign call those methods we'll see that in action let's get started um what i can do for you is i'll create quick notes for you http headers right all right so the first thing you should know http headers is in the class plus http headers right we need to import this we need to import the class http headers now once we have done it we we can pass um http headers through any of the http method it can be your put it can be your get it can be your delete it can be your patch it can be your post or etc right basically you can pass with anything now we can pass we can pass any number of headers of headers there is no restriction right and then just make sure that we don't send duplicate headers right this is not correct at many levels uh because your application will be confused your endpoints will behave weird it will give errors so do not send duplicate headers for example if you are already sending a header by the name content type right make sure you don't send the same again like with something else right so if you're sending something like content type application json don't send it again and say uh in the same request in the same request i'm saying not in the different one in the same request okay in the same request don't send multiple duplicates so this is duplicate right so don't do this mistake and we can also send custom headers which are required by our application specific requirements or needs okay so this is a high level summary of what we just learned uh let's get started i forgot to write an important one which is remember that headers are immutable that means you cannot um not you we we cannot uh modify them directly right however we can add append indirectly so don't worry on that we'll learn that also okay all set now this is the high level understanding high level notes for you now let's jump right into it and create some headers so if you remember again like i said um all these all um this tutorial this tutorial uses the code we created in last few episodes right starting from http client so make sure you check out the last four or five tutorials where we covered about uh get post put etc and delete so make sure you cover that in order to learn what what we have done here in these methods but i am assuming and i believe that i trust you guys that you have learnt it so here if you remember we had written that once you get it we'll cover it in the coming tutorials with headers params so this is that tutorial on headers all right so in order to create a header what we need to do i told you first we need to import the class headers and create a new instance of it so here i'm going to create a new instance i'm going to say headers equal to new okay so i've created headers now we i told you we can add and the way we do it is uh we can define it like this inside the brackets you can pass multiple options like i will say content type and the value of it so it's a key value key value pair content type i'm saying application slash json and i'm also saying authorization this is usually a token that you would mostly send in most applications it's a good practice that to send it so i'll send some value here it can be anything it can be masked it can be hash value it can be with special characters whatever you wanted there right okay so unnecessarily quoted fixed unnecessarily so i don't know this should be in quotes just a second i think i'm missing some codes let me fix it here okay right so this is my headers now the wavy opacities to the get method will use curly braces and you can see in the documentation we can pass headers params etc so here i will include headers and pass http headers so it's compiled successfully let's see it in output right so let's reload and we should see our contacts right now go here and you will see in the request headers right you see here authorization that's the one that we sent and we set content type right so this is what we are sending if you see this detail we are calling this url through get method we got 200 okay in the request headers we have set authorization we have set content type right so these are some of the default ones but what if i want to add my custom ones right and i told you headers are headers are immutable right so how do we do that then so let's see it here so what i'm going to do is i'm going to create a new instance and then i'm going to say http dot headers headers dot append right so now what i'm doing i'm setting the value let's say i'm setting a new value of a custom one i'm calling it this is not existing but this is my value i can set it anything i want right so that way so what you're learning here is custom right custom headers now to edit this headers you have to make it let because if it is const you cannot edit it now you see i am assigning the value and i'm assigning this value to http headers and i'm setting the value right so this is one of the techniques so let's see why so it's compiled successfully now i'm able to set the headers and get the value so i now when i request i should see three headers content type authorization and arc tutorial id so this is again you see this is a custom header type you can set any value you want which your api understands let's see it here you see arc tutorial id you see authorization and you see content type right so i told you we can send any variable we want we can set custom headers as well right we just saw that we just created a custom header that we want and we are passing it remember however you are assigning it back to the headers you are creating it it will be a common of it so what you will do is you can also set dot append right that's another method you can use either set you can use append right so here what i'll do http headers okay now here i'm setting dot set similarly you can use http headers dot now i want to check for something let's say when i receive a value here i'll say x id i'll say or say time out milliseconds right so i'm saying timeout seconds i want to timeout after let's say if it's more than 3000 right if it's more than 3000 i want to time out or change the arc id or authorization etc so we can do that as well so we can say dot so now i'm showing you a new technique of how to get and process details on http headers using get now so here i will say let time equal to and here i'll say if time is is so here you need to convert it into a date so since it's a string so what we'll do time dot uh parts or we can say index or for let's say for example just i'm saying you can you can take any example here i will say is equal to equal to 3 000 right so now you can just clean up this code and we will say headers dot set it's if it is if it is time is expired then i will say authorization i will say no right so or you can say empty so now when you request if and at the end point you can check that you know um so at the at the api api we can check if authorization is empty redirect redirect user to login screen so some logic like that right some custom logic so the idea here is to see that we can use get to get the value from this headers and then compare it right so that's the idea so now if you see it will say authorization is empty null right so these are various combinations of logic that you can use by setting removing deleting your headers etc right so similarly you can also do http headers equal to http headers dot so you can do get delete append get all set etc anything that you want to your application logic says but you get the big picture that they create http headers pass this was the values you'll get or you'll pass you can also modify them based on some condition or logic in your application and finally using the headers option we will send it to the api right so that's the that's the functionality of headers that's how you use headers basically we'll cover this again when we start our live application but this is all you should know to start with and implementing in your projects you should know the basic fundamentals so this this should get you started with that all right that being said um all right sorry so that being said in the next episode i will cover http parameters how to cover how to pass parameters on the similar lines of http headers so if you like this video give a thumbs up if you like the way i explain things give a thumbs up to this video like my video thank you so much i'll see you in the next episode thank you so much

Channel: ARC Tutorials

Views: 14,946

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 request, angular http headers tutorial, angular http headers examples, angular http

Id: z83KBAoyNWw

Length: 17min 5sec (1025 seconds)

Published: Tue Jul 14 2020