Get Parameters value from route using ActivatedRoutes | Angular Tutorial

[Music] as of now in this angular application we have created some routes we are also passing some data in those routes by using the parameters now it is time to learn how can we get those parameter values in our component file so that based on those parameter values we can make the further operations this is the angular application that we are using in this course and here we have created some routes let's say we are inside this public routing module and in this public routing module this time you can notice we are passing two parameters the first is the id and the second is the author id now this application is running in the browser and i'm using the ngsr command for that here we are in the browser and at this place you can see that this application is working fine now if i click on this details from app link you can see we are passing two parameters in this route this is the first and this one is second now i have to get these values in the component file and for that we have to use an interface in the angular and this interface is provided by the router module and the name of this interface is activated route let's understand how can we use this activated route in this application if we talk about this particular route we are using this component that is the book details component for this path let's go inside this book details component and over here inside this book details component we have to use the interface there are some concepts that you are not aware as of now the first is the dependency injection and the second is this own init method we will learn both of them in upcoming videos but here because we are dealing with the routing and we need to get the parameter values so we need to understand the basic concept of both of them the first is the dependency injection let's say i want to use an interface or a class at this particular component file then there are multiple ways the first one is then i can simply create the new instance by using the new keyword and the second is that i can use the dependency injection and this angular application will resolve the dependency automatically so here i will be using the dependency injection to use that activated route and here in the constructor we have to provide the access modifier that is public or private if it is public then we can use it in the html template as well but if you want to use this particular service or the instance only in this component file then we can also make it private so here let's make it private and give it a name that is the route you can give it any meaningful name then here we have to provide the activated route this one and you can notice that this activated route is available at this angular and the router when we will run this application then we will get an instance of this activated route in this route parameter and we can use it in this entire component by using this dot route now let's talk about this ng on init there is a complete life cycle of the component and this is one of the method if you want to write anything about the initialization in your component then this is the best method and to use this ng own init method you have to use this own init once you implement it then you will get this ng on init method and remember this own in it is available at this angular core we will cover both these concepts that is the dependency injection and this ngo in it that is the components life cycle in upcoming videos but here because these were required so this is how you can use them now our main focus is to get the parameter values here in the component file and we have everything in this route parameter so first let's print its value on the console and let's see what all we have over here console dot log and here i'm writing this dot route just save the changes and go back to the browser this application is already running in the browser so here i can simply open this developer tool just go to the console and at this place you can see we are having this activated route let's refresh the changes again we are having this activated route and over here we are having lots of details the first is the component the component that we are using currently is book details component then we have the data fragment and these are the two main properties that we have to focus on first is the params in the params you can see we are having two values first is the id and second is the author id and the value of the id is one that is coming from this place and the value of other id is three and it is coming from this place so if you want to get the details about your parameters then you can use these params and you can get both of them but here we have to focus on one more concept the type of these params is behavior subject and this behavior subject might be a new concept for you but do not worry we will understand about this behavior subject also okay now let's go to the component file and here if you want to get the value then we have to use this dot route dot params then dot you can notice we are having loads of methods over here if the type is observable it means we have to use the subscribe method and here in the subscribe method we have to provide again a type let's say here i'm writing param and that's it now the details about all the parameters will be available in this param let's print its value also so here i'm writing param just put a semicolon save the changes go back to the browser and this time you can see first we are having all the details about this activated route and this time here in the second console we are having only the id and the author id it means if i want to get the author id then i can simply use this param dot author id and if i want to get this id then again i can use the param dot id let's do that also so over here i'm creating two more properties it is the id let's provide the number type then again i'm using author id and again this is also of number type and here because we are declaring them let's initialize the default value also so let's say it is 0 and here also it is 0 save the changes and let's use both of them over here on this component file so here i'm writing again a p tag id is equals to by using the interpolation i will be using this id again use one more p tag and this time here i am writing author id is equals author id just save the changes and go back to the browser you can see we are having 0 0 in both of them now let's assign the values from this param so here i can write let's remove this console because we do not need them and here i'm writing this dot id is equals to param dot id save the changes you can see we are having 1 over here if i will replace its value like 12 again you can see it is working fine we can also get the value of the author id in the same way this dot author id is equals to dot and this time you can see both the parameters are working fine instead of using this dot you can also use this square bracket so let's say here i'm writing this square bracket like this then this will also work and you can see we are having both of them so either you can use this dot or you can use this square bracket to get your values and you can use the same concept in all your components to get the parameters for the current activated route [Music]

Channel: WebGentle

Views: 5,599

Keywords:

Id: JgTLlmmudAU

Length: 8min 26sec (506 seconds)

Published: Wed Sep 15 2021