50. Passing and Fetching Parameters to Routes using ActivatedRoute snapshot in Angular.

hi friends this is leela welcome to my angular course in this video what we'll see is how we can get the params from the url in the previous video we have seen how we can programmatically navigate from one page to other page right so we have seen everything how we can navigate through the template and also through the typescript code we have seen now in this video how we can get the data okay from the data from the routing so for example see if you see here if i click here i am getting the users okay right it's fine now if i have a user data something like user id i want to get the user id one which is of namely that so if i enter like this so i want to get the data which which they have uh entered in this one we need to get this one so where you will be useful is in order to get a user details in order to edit the user details somewhere you will be able to find the segments of data so how we can get that data okay first we need to define the root for this one so how we can define the root before going to this one we will create the component okay after creating the component so let us create the component and here what we'll try to do is we will try to write the component so how we can write the routing so how we can write the routing is so here i can write path of type users slash one slash leela so for example expect this one so i need to know the component user component okay so i am loading the component user component okay so that means whenever the route matches the url matches user slash one slash leela it should load the user component so let's see the output first so whenever the route matches slash one slash leela so we it should has to match okay fine it's loaded but here slash one slash lila will not be the permanent one so it will be changing why because the one is the id and the name and lila is the name of the user so this will be dynamically changing it will be coming from the database or somewhere from where from where it will be coming the data so it will be dynamic so how we can represent the data like this so we cannot go on representing we cannot go on writing like this uh so slash two slash three like this we cannot this could be a bad behavior so how we can implement that one so in order to implement the type of data so we need to somehow tell here the root it should be dynamic so how can we tell this so here it should be an id so that means we need to write column id so that the angle will assume that okay fine here the data will be dynamic and also here in another one we need to write an identifier with the column name okay so now the angular would identify that this id and name so these two things will be dynamic one so whatever the data it will be it will be having u slash user slash something slash something means it will load the user component now if you go here and if you load load this one you will get the data and if i write slash something slash something like this also it will match okay it will go so this is how we can mention dynamically the routing concept and now how we can get the data this id and name from the to the user component so how we can get the data is let's go to the user component.ts so this is a user component.ts how we can get the data is first we need to inject the route okay we need to inject the route so what is the route currently it is loading so what is the route currently it is loading for this components in order to load this component it is loading is user slash something slash something so we need to get this current route okay current route we can get using here private route come activated or it is of type activity in this activated road you will be having that activated load that means current road so currently activated route you'll be having so it should be imported from the angular router so don't confuse between the router and the activated route activated route gives you the details of the current activated route current route and the router gives you overall the routing concept okay now here we got the road so how we can get the data so let's assume so here we i can get user of type so i will be getting of type id is equal to string or number anything you can write so name of type string so i will be getting two details user of id string and it's fun so how can i get the data so how can i get the data is this dot user is equal to i can write an object and id here so i need to get the id so how can i get the id here something first one will be the id you know that so what how we can represent this so here we can write this dot route dot okay so you will be having snapshot okay snapshot dot params so the params of the the identifier so what is the identifier here we are having this is a column id so whatever the identifier you have written here you need to mention hearing hearing so here i can write it id so i will be getting the id here in the same scenario if you want to get that name so you'll be writing this dot route dot snapshot dot params of name you can write here name okay this dot user is equal to id and name we are getting this id and name now what i can do here i can go to the html and what i can do is here i can remove this one all and i can write you here i can write one do user with id is i can write user dot id okay in the same scenario with the name is if the name is user.name i can write like this user.name so now if i go and refresh here the code here you will be getting user id something and user with name is something you are getting why because the id and name are both the same so if i write one slash leela and if you refresh it here you are getting user id with the user with ids one and name so whatever the data we are having here it is pulled from to the ts code and we are we are displaying it in the template so this is how we can represent the dynamic roots in the angular code so what we have done here first we need to write here what are the dynamic elements in the url whatever whatever the segments we are having that is dynamic we need to mention it with an identifier and this identifier whatever the component you are loading here in this component you need to go there and you need to inject first this activated route and from this activated route you can get this this doubter route that snapshot of params so it will take the snapshot in the bottom of the params it is having it will have it in the snapshot okay so you can store it in whatever variable you want and you can display it here so this is how we can get the dynamic data from the url using the activated route if you have any doubts or any sessions please post the comments below to this video and if you like this video don't forget to subscribe to my channel thank you

Channel: Leela Web Dev

Views: 36,207

Keywords: angular, angular routing, activatedroute, angular router, angular tutorial for beginners, route parameters in angular

Id: JT3s9HQxc1c

Length: 6min 55sec (415 seconds)

Published: Sat Sep 12 2020