Angular 9 Tutorial For Beginners #34 - Query Params in Routes

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 query parameters what our query parameters what are the use cases why do we need them and how do we use them we'll learn all about that in this particular tutorial welcome back my name is shredder I bring over 10 years of experience as a full-stack developer I am here to share my knowledge with you also to learn from you all you during the course of this tutorial series if you have any doubts if you have any technical queries please feel free to ask me in the comment section below I will be happy to help you for free I have created a full playlist for you which has now around 35 tutorials plus if you are really looking forward to learn angular and master angular you must check that our tutorial I am sure that you would be able to master angular after going through that tutorial playlist so please do check it out the links are in the description box below alright so so far in the past few episodes we are thoroughly learning about angular routing in the previous episode we learned about parameterised routes but previously we have covered some more topics on routing as well as all other features on angular so routing and we are focusing on routing so today we are going to learn about query parameters now what what our query parameters so whenever you come across URLs wherever you will see something like a question mark followed by some tags followed by some parameters and values these can be UTM codes this can be usually get calls GT right that's an HTTP method we learn about that later when we start doing a full-stack application building so remember your urls query parameters are available in your url which are visible to the user right let me show you an example what I mean now if you see query parameter so query parameter dot PHP and then you should you will say tag equal to say USA or you can go to twitter.com slash search and then you'll see query parameter equal to trending right equal to country equal to us a trending top ten country USA so you see these are all visible in your URL okay so this this is publicly available usually these are get calls right we get HTTP calls HTTP method calls visible to these are visible to the end users so whenever you implement query parameters make sure no sensitive sensitive information is captured via query param so no login no passwords no credit cards etc etcetera all sensitive information should not be used in query param param eaters it should always be they should always be post calls okay so coming back to query parameter param SAR passed in the URL right are passed in the URL right like this now these are HTTP calls these are visible to end-users and forth let's learn hands-on how to implement them how to implement them okay so let's see that now so I'm going to create a new component first let's create a new component and call it ng generate component search okay I'm creating a new component I will configure and I will say I will pass some parameters I want to search the products so now we'll go to a routing and by the way if you have not checked out the other metal other tutorials on dynamic routing like parameters configuring these please do so please do check it out previous episodes now in the path I'm saying I'm doing search then I'm saying component and the component name is search component I'm using an editor which will already import it but in your case you might want to import it manually so make sure make sure that you import it first and then add it here in the component okay so I'm saying whenever there is a path with say slash search you should configure it to search component let's get this working first so here we'll say search and we should see search works right this is good so far so good now what we will say is we'll go to the search component component class right and here we'll inject activated route so here I will say pry wait activated route right so now it's easy for us to capture the parameters so how do we do that you will write a subscribe event for dot query param subscribe and we will read the data that is being passed from that subscribe call right so we are subscribing to that data and whenever we get the data we will we will console.log that right so let's say here I am going to say here I'm going to just console.log for now and show you the difference here I'll say data okay so when I say data now it will print all the data let's see now I'm going to open my inspector and in the console I'll clear everything okay so now keep an eye on this instead of iPad I'm making it responsive or I'm going to make it inside okay so it's much easy for you to see so now I'm putting question mark right and I'm saying tag equal to say New York enter do you see here it says tag New York which got captured in the console now I'm going to also pass more now and I'm saying trending equal to 10 so now you see it captured too it's a basically an object and I'm saying country equal to USA so now you see three right all the three are correctly captured now we know the what are the tag names let ghost let's go back to our component and fix that so here I'll say query country equal to and then I'm going to say query tag equal to then I'm going to say query what else is there query tag trending trending equal to say 5 ok so here now we will assign that values query country equal to data dot country and similarly will capture and say query tag here will say tag here we'll say query trending here we will say trending ok in the HTML I'm going to create here and I'm going to search param query parameters past right so I'll say country then I'll say tag so I'm going to use a parameter here and a tag again here just to separate it out so it's much readable for you okay and then we are going to use one more here we are going to use country here going we are going to put tag I'll format it in just a bit trending okay okay there are some shortcuts that I've used to format so I will teach you that in the probably next tutorial or so so let's for now let's put it here and say query country and similarly I'm going to copy this yeah and this will become contribute a query trending so now we should see whatever we have entered so now you see country USA it was here tagged New York tag is New York trending is 10 trending is 10 now let's change it here now we see country got changed to India now I'm going to change tag to say Delhi so now it is Delhi now I want 50 so now we have 50 right so this is how we will capture our query parameters I hope you liked this video if you have any doubts drop them in the comment section below please don't forget to subscribe to my channel I request you go back to the starting of the video try hands-on with me slowly go check out each and everything in detail let me know if you have any doubts thank you so much for joining see you in the next episode where we will cover how to redirect the routes to other routes thank you so much see in the next episode

Channel: ARCTutorials

Views: 33,787

Keywords: Angular 9 tutorial for beginners, Angular Tutorials Query Params Routes, Angular Routing Query Params, Angular 9 Query Params, 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

Id: HBM2MHZFj_A

Length: 10min 48sec (648 seconds)

Published: Sun Jun 07 2020