Get Query String value from URL in Angular | Angular Tutorial

[Music] there are some situations where we have to pass the data in the url in form of query string let's understand how to pass the data in query string and how to get its value in the component file here again we are using the same application and this application is running on the browser by using the ngserv command and here is the browser where this application is running now let's talk about this login page so let's say in this login page here i'm passing some data in form of query string to pass the data in form of query string you have to use the question mark and after the question mark you have to write the name of your query for example here i'm writing name then put an equal and its value let's say it is net is and again if you want to pass one more query string then you have to use this time ampersand and here you have to provide your second key so let's say it is email is equals to here i'm writing sample and let's hit the enter button this will work perfectly fine because this query string always and optional now let's understand in case we are passing data by using this concept then how to access its value on our component file and for this let's go to this oauth and then the component we have this login and here we are and again we have to use that activated route and for that let's use it in the constructor by using the dependency injection so here i'm writing private route and it is not necessary to write only the route you can write any meaningful name to this particular variable activated route and again over here we have to use this dot route dot this time instead of using this param we have to use the query pattern and then the subscribe here i'm writing and let's print its value by using the console.log method just save all the changes and now let's go back to the browser so again here we are on the login page and let's open the developer tool go to this console section and just refresh this page one more time this time you can see we are having both the values this is the name and this is the email in case you will pass one more value let's say here i'm using one more end and let's say it is id is equals to 10 hit the enter button this time you will notice you are getting all of them and if you want to assign them to your local variables then you can create the variables over here let's say here i'm writing public and it is name the type is a string like this and just use this name at this place so here i'm writing this dot name is equals to query param dot name and again there are multiple ways either you can use this dot or you can use the square bracket we can also display this value on our html template so here let's use this section p here i am writing name is equals to name save the changes and here we are we have this name over here on this html template if you will update this value let's see here i'm writing one two three hit the enter button you can notice we are having the updated value over here in the same manner you have to create two more variables in this login.com.ts file just like i have created this name just create two more variables for the email and the id and get its value from this query parameter and just display them over here on this login.com.html file you can use this same concept to get the query parameter value at any place in this angular application let's copy this entire code and let's go back to this public section and over here in this book detail component we are passing these parameters now let's say along with these parameters i am also passing the query parameters then how can i access these query parameters over here in this book component okay so just like we have done for the parameters we can also use the query parameter and you can assign the values to your local variables over here so let's say it is public name define the type the type is a string and the default value like this and here i can write this dot name is equals to query param dot name that's it we can also display this name value over here on this template name is equals to name just save the changes so let's click on this details from app you can notice we are not passing any query string over here that is why we are having this name is equals to blank but if i will pass the value in the query string let's say it is name is equals to nitis hit the enter button and you can notice we are having the value over here if you will update this value let's say here i'm writing one two three hit the enter button and again we are having the updated value so in the same component we are getting the values from these parameters and we are also getting the value from this query string [Music]

Channel: WebGentle

Views: 9,859

Keywords:

Id: IJOlcnP0Pd8

Length: 5min 38sec (338 seconds)

Published: Fri Sep 17 2021