Params and query params | Angular Routing | Activated Route | Angular 15

in this video we will learn how to use a mandatory params and query params in angular routing how to pass them and how to retrieve them in the components let me quickly jump into Visual Studio code here already we have discussed about the routing and how to move from different routes and how to navigate from one route to another route in our previous video and in this video we will try to pass the data to that particular route dynamically and just we will pass the data to that particular component via routes and we'll receive that in the routes so for that sake let me go into our main component that is app.html and here we have a router Outlet now we have three components that is login component and register component let me go here and create a button so let me use a button here and inside this I'll try to use a click event that is a click event and I want to navigate the user to login so for that sake let me create login and this button is related to login so let me save this and copy the same and paste here and write register so let me use a method called as register we go into app.component dot TS and let me create these two methods copy paste here and then create this and go here login copy and let me paste here and open this so let me go into the Constructor and inside the Constructor I just want to create a router so private router colon router so whenever I use this router I just want to pass some data via routes whenever I click on the login I just want to pass some data to this particular login as a mandatory parameter so let me go into the routing file that is app routing and here we have something called as login component and this login component requires some ID so I want to pass some ID for this login component whenever I click that login so for that sake I can use this dot router dot navigate method and this navigate method will accept an array of parameters and this array will have a login which is the first parameter and the second parameter is something like a dynamic value so let me pass one as user ID let me save this and now this login will happen and you can see this one on your url let me go to the browser and here when I click on the login it went with login slash one that means whenever you want to pass a dynamic value to a particular route then you can use your routing configuration with colon ID why it is called as mandatory parameter let's see that let me remove this and save this and go back you can see whenever I click on the login you can see here I went to login but it tried to go into not font that means it is a mandatory param for this once it matches with this particular whole path then only it will try to navigate otherwise it will not it needs two parameters one is a login which is a static value and a dynamic value that is an ID let me go here and again revert this and save this let me go back and go to the register and then click on login when I click on login it navigated to the login with one so it went with the data that is absolutely fine we are able to pass the data from our component to another component that means our root component to our login component but why we are passing we are passing just to receive the data in our login component for that sake let me go into login component and here what I will do is I'll just go into the TS file and create one Constructor so inside the Constructor let me create a private activated route there is some service called as activated route and that activated route will receive all the details about that particular route now I'll just write the console console.log of this dot activator route dot I'll just want to use Snapshot Dot params and save this this activated route will have a snapshot that snapshot will provide you the params whatever the params which we have the params is something like an ID if you want to use this ID then you can use some dot ID and save this and if you see here you can see one but this one is a type of string why because you are getting from the URL but whatever you are trying to pass here in our app.component.ts is a number but what you are seeing in your login component is a string why because whenever you are trying to pass any data to your url it will be converted into string and whenever you want to access it you will be getting that value as a string if you want to use it as a number for sure you need to use some parsing techniques like conversion techniques for converting your string into a number I can use a plus and it converted into number so this is one approach where we can access the data by using snapshot Dot params and there is one more approach that is observable approach this dot activator route dot params.subscribe I can subscribe to this and this subscription will give the result to me and this result will contain all the values which are like params so let me write response and save this now you can see that ID you got an ID with this and if you want to access only an ID dot ID and save this let me go here and you can see one so where you are getting that particular ID here you are seeing the ID but where we are getting it we are getting it from our routing if I pass an ID here that ID will be configured here and it will be shown like this if I change it to something like name then you will be seeing the name there so you can see here you are seeing a name property this is how you can pass the data from one component to another component as a mandatory parameter if I am not able to pass this mandatory parameter it will not work and it will not showcase the data for you and it will go into the not found page so this is about the mandatory parameters for example if you want to pass the same strategy without using navigate that means you can use one more thing called as this dot router dot navigate by URL if you want to pass like a URL then you have to use either a concatenation process that is slash login slash an ID concatenate with one so this is how you you have to pass and it is a very big process and trying to understand this is always a complex structure so that is the reason I always use the navigate let's try this and go here if you see here we are in the register page let me go back to the register page and let me come back to the login you are able to see that ID you can access the data but the way how you are using is typically confused and also the people cannot understand or the readability is very low that is the reason I will go with this particular approach now the second thing is if I don't want to pass mandatory parameters but I want to pass some data to the component how I can pass it via routes that can be possible by using your query params how to pass the query params let's see that this dot router dot navigate is the same strategy but this time I'll move on to register so I am using a register and this register has one more property or one more parameter which is an object where you can pass the query params and this query params is also an object so for that sake I'll use a query parameters and inside this query parameters I can pass anything like name PSI comma age 27 save this and now let me go here let me go into the register click on register you can see that name PSI and age 27 are passed in the URL and if you see here in the register you are not configuring anything as a mandatory params so whatever you want to pass not with the mandatory params then you can use this approach so if you see here I pass the name and age somehow I missed something in this let me remove this Edge and hit enter it works fine because it doesn't matter how many parameters you are passing after this question mark even they are valid even they are not valid it will not bother about them it will only target for this register and it will navigate to a particular route based on this particular path not with the question mark and how to access this values so for that sake let me go into register component and the same strategy we will use like Constructor and inside this Constructor we have a private variable and inside this private we have something like activated route and access it with activate third route let me go inside this and write the console console.log of this dot activated route dot snapshot dot query params and let me save this you can access all the query params inside this let me go here and go back you can see let me go into the login and this is mandatory parameters let me click on register you have passed the name and age and that can be accessed in your query params this is one approach to access your query params even we have some other approach that is nothing but this dot activated route dot query params.subscribe and you can get the result and that result will contain all the values after that question mark so let me write console.log of response and save this go here if you see you are able to get the values that is name and age and if you remove this name and age then you will be getting only name and if you remove all the parameters from the URL it will not break anything you will be getting empty object and you are in the register component so that is the difference between a parameters and query parameters in our angular application and this is the way we can pass the data from one component to another component via routes so if you want to pass the data as as a mandatory parameter then go into your routing file and just configure your routing file with colon path and whenever you are passing this colon then you have to pass this as a mandatory parameter if you are not able to pass this Dynamic value then it will go into the not found page and how to access them let me go into login component.ts and you can access them by using activated route in two ways that is Snapshot dot params or snap params.subscribe by using subscribe you can use an observable pattern by using snapshot it will wait until that is completely executed so this is the approach where we will be using asynchronous and asynchronous type of accessing the URL and if you want to pass the data which is not mandatory but you want to pass some data to your component from another component then you can use Query params this is the way how we can pass the query parameters the query parameters can be passed as a second parameter as an object where query params is a key where you can pass an object of values and that values you can pass it from one component to another component whenever you are trying to receive then go to that particular component and activate a route is a responsible person to give that activated dot snapshot dot query params where it will bring or access all the query params and whenever you want to go with an asynchronous content then you can use subscribe so this is how you can use your query parameters and actual parameters in our angular application hope you like my explanation if you like my video like share subscribe to my channel for more update signing off thank you

Channel: Techshareskk

Views: 4,052

Keywords: how to pass params in angular, how to access params in angular, how to access query params in angular, how to pass query params in angular, params and query params in angular, query params in angular, params in angular, route params in angular, angular query params, angular route params, dynamic params in angular, dynamic routes in angular, angular 15 routing, angular 15 navigations, angular 15 by techshareskk, techshareskk angular, angular tutorials for beginners, techshareskk

Id: yqlbLTOkc2c

Length: 11min 54sec (714 seconds)

Published: Tue Jan 31 2023