Angular 9 Tutorial For Beginners #33 - Parameterized Routes

hi friends welcome back to our tutorials we are continuing with our angular 9 full tutorial series and we are focusing on angular routing in this particular last few episodes today we are going to learn about parameterised routes what our parameterised routes how do we pass parameters how to implement it we'll do some hands-on we learn all about that in this tutorial welcome back my name is leader I have over 10 years of experience as a full-stack developer and I'm here to share my knowledge with you and also to learn from you all during the course of this tutorial series if you have any doubts any queries feel free to ask me in the comment section below I will be happy to help you for free I have created a playlist for you angular 9 full tutorial playlist so please do check it out which has over now 35 tutorials if you really want to master angular it has everything for you to learn from it all right so like I said from the last few episodes we are focusing on angular routing and we have covered basics of routing we have learnt about routing strategies routing module outlet and we configured some routes in the previous episode today we are going to learn how to pass parameters to the routes which is mostly the case when you are building any crud operations or any application you will require to pass parameters in your routes after this tutorial you will be able to create your own routes which will take parameters let's get started and see how so parameters is nothing but you when we configure a route which will take dynamic values if you remember from the previous episode where we have created static routes for example if we see product slash then it was always the slash 10 right the value will always be 10 but in real-world scenarios and use cases the value will always be dynamic for example if you see here we are configuring the value when telling the angular router that the value will be dynamic by passing : ID so this is how we can pass the dynamic value to angular routing now we will see some hands-on example now to do that let me do let me share my screen and let's get started by doing URL parameters basically right so we will be able to pass values and then also read them in the in the our component okay so let's get started let's open our editor okay so we have our editor I have my package let's go to crowding dot module right so if you see here I have already created something called I've already created something called product ID / : ID right now this can be anything that you want okay there is no compulsory so I'm going to create it from scratch for you so I will generate a component I will call it orders right order right order - you so let's generate a component and let's call it order - view okay so we got our order created here order view and it's already included in our app module which is good now in the routing let's add that path and we will say whenever we encounter a path like this and there is an ID it should point to component order view component right so order view is already imported here in this line if you see right number eight so now you see we have a path which is taking dynamic value okay so let's go to order view and it simply says order view works that's what we should see alright so let's start it I think it's already serving let's see if not we'll still it's okay so I already have it serving here let's - slash order slash 20 it says order view works which is what our template says right order view template says out of you now I'm going to pass here 30 it still says order view works now I'm going to pass some random value it still says it works now I'm going to pass some alphanumeric which is numbers plus string characters it still works right now this is simple use case now let's capture that detail and display it here okay so for that what we are going to do is in the order view component right so here we'll need some supporting or libraries or modules so we will import something called activated route to capture the things and then we will say activated route okay so it's imported from angular router and then we will say in the constructor let's have a variable defined here I'm going to call param query equal to initial state is empty but now we got this dot activated route dot patterns right dot subscribe now here we are reading the data and we are saying we will assign this value to this dot param query equal to data okay now it says cannot assign value string right so bits because it's an ID correct so here what we'll do instead is we will say dot say ID okay and in the template we are going to use that and here we'll use interpolation and we will say param query that the same variable which was entered here right so now let's see so it's it is showing the value that we entered here now let's change it here make it forty so now let's little bit formatted so that we it's much easier and again and third value okay so you see entered value is 40 so now it knows what parameter was entered dynamic value see now it is 30 it's 40 so similarly we can configure the parameters route that we are doing and we can easily configure the dynamic parameters right so this is one of the use cases that we use in terms of passing parameters into our route okay so now usually the question that is often asked is can we pass multiple IDs yes definitely we can pass them so let me show you that by an example now here we just have to simply configure in the route path okay so here we have to give a different name that we want to capture so now let's try with multiple routes so let's say this routing ID okay so here I'm going to say /i d / ID - right which means now this should take two parameters right but now if you see since I am only passing one it did not take it anything and it says route not found so we'll fix that also in just a bit right now it is taking two parameters and how do we print that value we can easily print that value by saying ID two that I want data dot ID - now it is giving hundred similarly I can also capture ID one param1 param2 I call it query query one and param - okay so now I have two in the template let's add the two parameters first Parrom entered value ii param entered value here we'll call it one they call it two two now and let's just put a paragraph break so we can read it easily okay and that's it so now we should see two parameter values the first parameter value okay it's not showing let's see why it's just ID and not ID one okay so first parameter value is 40 the second parameter value is 100 right so similarly we can configure multiple routes as well so we can configure one route we can configure multiple dynamic routes we can pass these values according to however we want so if you have one ID just pass one if you are expecting to just put that there are the second component name that you want to use so yeah so that that is how you can configure different multiple parameters to your URL routing so this was all about using parameterised routes in the next episode I am going to teach you about query parameters another yet another important aspect of angular routing do try this out do let me know if you have any doubts any queries I'll be happy to answer and help you thank you so much see you in the next episode

Channel: ARCTutorials

Views: 16,758

Keywords: Angular 9 tutorial for beginners, angular 9 routing tutorial, Angular 9 Tutorials Parameterized Routes, Angular Routing Parameterized Routes, Angular 9 examples Parameterized Routes, Angular Parameterized Routes tutorial, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers

Id: r1E912m_jFQ

Length: 10min 17sec (617 seconds)

Published: Sun Jun 07 2020