Angular 10 Tutorial #45 - Query Params in Angular | 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 are going to learn very very important feature that's almost like used in every application that at least i have built and i've seen mostly any large application it's query params right so query params are a way to send communication or data from ui to backend right also known as the get method right so you your your params are visible in your url um mostly for search mostly for querying mostly for filtering data etc these are the common use cases where you would see yourself implementing and using query params it's one of those that you don't want to miss it and definitely learn and master it after this episode you will be able to master it let's get started this is part 15 of the angular 10 complete tutorial playlist i have planned around 100 tutorials for you in this particular series with live project as well so make sure i will be updating all the details in the description box below make sure that you get access to the notes code and the playlist link following other topics that i've already covered in detail previously in the playlist so make sure that you go through it if you really want to learn and master angular don't forget to ask me any questions or doubts that you may have along in the process of your learning i'm here to help you and learn and become expert just drop them in the comments section i will be happy to help you so today we are in the 45th episode today we are learning about query params right so query params let's get started so what are query params um so we can easily configure and send query params uh in our routes right and basically if you look at the url it would look something like this right you would have question mark followed by key equal to value and some agreeing key equal to some value and so on noticeably whenever in any application if you have seen a feature called search or filter this is something that's the most common use case you would have seen right let's get into our application and see that in action so this is episode number 45 query params right so query params how does the look we can send data from form right or we can have data from click event right basically um just think that your url would look something like this http localhost i mean not this url basically you will have your own whatever url of your application you will have some route and it should be able to take parameters like this so if you say key equal to 10 and state equal to karnataka and city equal to bangalore so see these are params right so these are key value right so you are passing these are called query params because they are visible that these are called query patterns visible in the url right mostly used for querying searching or filtering data etc right so if you go to flipkart.com or if you go to google and there if you start adding more options like size color etc and see the url you would see something like this right so yeah so those are some of the common examples or use cases that you can find similarly go to twitter or facebook and you would still see something like this if you do a search like page count right so you would see something like facebook.com search question mark you can say page equal to 10 and page size equal to 20 per page right etc etc so pagination so these are some of the common examples that you see in query params so that was all about some of the explanation and use cases that you have seen let's learn how to implement it now in our application right so i'm not i'm going to keep it very simple uh what i'm going to do is in the routing right let's throw in a new route and i'm going to create a new component and i'm going to say search right so let's create a new component search beautiful so we have now our component which is search now it will the path is slash search so what happens is uh let me give you an example so when you have something like this and you ask user to search let's say user enters some data let's say mic or say qa or something and click on hit it will go to search form right it will go to search form and it will come to this url which should have the capability to capture that right so how do we do that for that we need the activated route so let's import that so in the search component import the router right and here activated route okay so you have got the activated route now let's class now let's create an instance private okay and in this constructor what i'm going to do is this dot activated route dot query params dot subscribe see now i'm getting the params so here i can just do console.log and say for now right all right so now i have the um the query params all set now let's launch the application and send some data and see how it looks right okay so let's go back to our application and i'm going to say slash search question mark and i'm going to say simple start with simple i'm going to say id id equal to 10 but it still says lead leads grid works that's because we need to pass the default one that we said search question mark let's see the output okay so it's not loading because the component is not mapped let's see why okay here it still leads grid that's why such component so now we have search and search component all right so now it says search works let's see inspect element console and there you are so you see an object which says id 10 right because that's what we are passing here now let's pass some more values to it right and i'm going to say st let's say we are going to search id equal to 10 and i'm saying color equal to red so now you see color equal to red right and say at the rate size equal to large right so see how this is now you can start relating to what happens when you try to narrow down the search results in your e-commerce applications right you provide color you provide size and you say price right you'll say price from equal to say 2 000 rupees to and price from and to equal to say five thousand rupees right so see now you have price from 2000 price uh to 5000 right so these are called query params and see how they'll be displayed right so that's how you capture it in the component and now it's very easy to processing right so now we can process it or we can either for now i'll just display it in the ui for your sake and when we start building the live application uh we will start connecting all of these pieces one by one so you would your learning would be actually converted into a practical hands-on experience all right so that being said let's go ahead and now capture this and display it in the template all right so let's go to search here and create a search right so you can put the parameters that you want here so i'm going to say color equal right color i'm just going to color is string price 2 is equal to 0 let's initialize all of it right basically so if it's nothing just put a default color or leave it empty whatever so again this initialize this then size equal to by default medium right so these are some values so take it extract them from the params and display it in the ui so let's first throw them here right now here what size now open any e-commerce application you would see these things common so you will be able to relate better and you see that it's not rocket science that um that they build right it's anybody just like you and me just like anybody can do that just a bit of formatting so okay all right so we have some default values so let's see so okay um size uh medium price to price from and then you have the color and size okay so it here we are putting so let's just save it and restart okay let's let's capture the continue and then we'll get the values so here i'm going to say and on the constructor this dot color is equal to this dot params dot color then similarly we will take the other values so basically just copying the values that are there and size right so now it should be visible so you see here now it says red large 2000 5000 change the value here and you see it will be changed right so basically that's a query params for you whatever um we do here that's what is getting captured right so that is the beauty of um how we can use um with um query params right so there is another one more way which is through router links right so this is this tutorial is getting extended so i'll cut it down and maybe i'll cover it in the next episode or so but for today learning your learning is and your homework is to practice query patterns because that's what is a very very important aspect especially when you're doing querying searching or filtering right so make sure that you understand the concepts well you use it and learn practically i'm here to help you drop me if you have any comments or doubts or any questions thank you so much for joining i'll see you in the next episode where we will learn about uh router wildcard routes right and if you like my work please do consider buying me a coffee at buy me a coffee.com arc tutorials thank you so much join me in the next episode we will learn about router wildcard routes thank you

Channel: ARC Tutorials

Views: 6,069

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular 2021 full course, Query Params in Angular

Id: aNlUNaXvaSA

Length: 14min 2sec (842 seconds)

Published: Fri Dec 11 2020