99. Adding Query Params for the Url using HttpParams Object in HttpClient - Angular.

hi friends this is leela welcome to my channel in the previous video we have seen how to set the custom headers we have seen right here so now in this video what we'll try to do is we will try to add the parameters params so how we will be adding the params so if it is get request means we will be using question mark and all this in thread so how we can use these params and how we can send the params through the angular we will see before going to this video so if you are coming first time to my channel please do support me by subscribing to my channel so that i will be posting more and more front end development courses okay coming to this video now you will in your api or anything any api you are using you will be having a option something like sending a query parameters okay parameters in the api they will be asking query parameters most probably the searching cases and all those things you'll be using these query params how we can send this query params in the angular we'll see now here we have seen the custom headers we are sending right so in the same scenario we can also send the params also you will be having another one something like params okay params params it will be having new http params so you will be taking new http params and you need to set custom either anything so custom high you can say you can use like this custom height anything you can do so this one is http params it should be imported so you can do http params you can take these http params and it should be imported from the same angular common slash http so you here you need to import it it should be imported from the here now i have added custom height something like this as a parameter now what it will be happening uh what did it behave is so now if you refresh here here you will be able to see here you will be able to see the post.json question mark custom is equal to high you will be able to see that it is adding as a parameter to the url and you can also imagine that you will be also you can also imagine that i can add like this also right you can be able to you can able to ask so i'm adding like this also right so you can have this you can do like this also this is the most common convenient way we will convenient way of using this sending the parameters through the url uh through the url in angular why because if you have a long very long url so you you will be having problem of concatenating so you will be getting the dynamic data you will be using plus and all those things you will be having a very long url instead of framing that long url you can write you may you can easily write this http parameters and custom high you can write so coding wise it looks uh very easy instead of having a very long url and uh dynamically uh changing manipulating that url it will be very tedious and if you want to send more than more than one parameter so for example here if you are sending another custom so another is equal to hi if you want to send like this or we can send so we can send this one also instead of having instead of doing this here we can we can also keep it top okay let's search params i can keep i can create a variable so i can do http params like this i can create http params i can create an object and here search params dot append i can use this append okay custom hi okay and another one also i can append so here name my name is leela so i can use this one and you need to remember that we need to assign this all data into the search form so that the formed url will be uh the what we can say the query parameter the query parameters will be attached to here so question mark and all those things the string it will be framing right so it will be attached to this variable and we can copy this variable and we can use this variable directly here okay instead of uh writing all the logic you can write at the top logic and you can frame it here now if you try to check the output here if i go and if i try to check the output let it refresh okay so while refreshing now you will be getting here see you'll be able to see custom is equal hi and name is equal leela so now i am able to append the multiple query parameters also so this is the way how we can append the query parameters to the url in the angular through the http line so we will be you can also use as a string concatenation you can use question mark analysis also you can use so this is this is the way more more dynamic behavior so most convenient way of writing if you have a dynamic variables dynamic data so coming from the variables or anything so you can use it directly here so that angular will take care of appending these all the things so this is the way we are we are happening we are using the query parameters in the angular so if you have any doubts or any sessions please post the comments below to this video and if you like this video do support me by subscribing to my channel another thing i want to tell you is so i am committing this all the code in the github url so in the github account so if you want to get this all code you can go to the github account my github account and you can see the angular course and there you will be finding all this code okay so thank you

Channel: Leela Web Dev

Views: 12,736

Keywords: angular, angular http params, httpparams, query params, angular 5, angular 6, angular 9 tutorial for beginners

Id: -KK9ode9AOs

Length: 5min 18sec (318 seconds)

Published: Fri Oct 02 2020