Angular 10 Tutorial #35 - Component Routing in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for beginners today we are going to start with the basic of routing because we introduced routing to you in the last episode and today i want to give you a bit of flavor of how do you do the most basic routing thing this is in no way or no sense effort advanced right this is absolutely baby steps in routing this is to give you confidence that you can learn and it's very easy to learn however routing itself is a very very detailed topic and i will try and cover all of those aspects but today's episode is very fun because you will do hands-on you will learn to set up components and their routes and see the magic that your application can start shaping up this after this episode you will start getting ideas that you can build different routes different screens different views in your application that's the way to go forward this is part 35 of the angular 10 complete tutorial playlist i have planned around 100 tutorials for you in the series with detailed explanation make sure that you check out the description box below because that's where the notes and the code that we'll do live project will go in in following are the topics that i've already covered in detail make sure that you check out all the previous episodes of this series because continuity of learning with examples is very very important and i am sure you will gain knowledge through that also if you have any doubts on any of these topics that i have covered so far please reach out to me in the comments section i will be happy to discuss and help you today we are learning about setting up routes for components all right so each component can have its own routes right route is nothing but that we saw in the previous episode it's just a url navigation right and you can switch between different routes each component can have its own routes you can have the component routes any way that we want of any name we want right so that's what we are going to learn in this episode it's going to be fun lot of hands-on activities let's get started as always i welcome you to ask me doubts queries in the comments section remember friends the best way to learn is to start practicing with me so when you learn this particular episode try and do hands-on ask me queries and doubts in the comments section that's the only way to learn all right let's get started now so i am sure you guys know and you have seen uh open approaching.module.ts this is the by default routing module that comes when you select a option of install routing in your application routing so you get this option right so this is where we'll configure our routes now this module is imported in app module so if you see app routing module you will see that this module is configured in app module which is what we are using now all right so before we do today's episode like i said is baby steps right so just stick to what i'm doing there will be lot of questions there will be a world of questions for you but all of that will be answered in coming episodes so don't jump the gun yet stay with me stay along the line follow me i will make sure that you learn everything all right so the first thing you will do is first create a component right so i'll say ng generate component here i'm saying loans so the reason is i will show start showing you some application that will be building right so you get an idea of where we will use it so i built a um i have generated a component called ng generate component loans this is the shortcut ng generate component loans so now you can see my loans component is generated right now in the routes we will add it's an array of routes right so it will have curly braces it's an object now you will say path this is a parameter it will take and then define what kind of path you want i am saying loans right comma which component it maps to right so if you are using visual studio or intellij it will start giving you this you click here it does a lot of things in the background one it will import it here right it has imported the loans component from that loans right and save it right so now you have your route which is ready so now go to your application and say slash loans and you see here it says loans works right the reason you're seeing too many other things is because our app component has so many things so what i will do is i'll comment of everything else which we don't need as of today right it's going to be very very fun because once you learn this art there is no looking back because you can build you can start building your own applications all right so i have commented off everything on this screen and i think that's some white spaces anyway we don't need this code so don't worry too much about it all i have is a router outlet now don't ask me today what is router outlet because that is for the next episode right i will cover a router outlet in next episode so hold on to your questions on that i know there will be questions as to why we use it where we use it that's for next episode today go back to app routing we have configured a route and we said whenever user enters this particular path it should come to this component that's what we are doing today so you see here when i say slash loans it comes out and says loans works right that's the default of the component let's generate one more component and now we will call it loan types right loan types so see now i'm generating two components and now i'm going to add one more route here and i'm going to say loan hyphen types right and here we'll again bring the new component which is loan types component which is imported by default here right when you select this so now i have two components two path here i have loans now i'm going to make loan types now it says loan hyphen types work right now what i want is i want to create add a new loan right so let's do that so now i'm saying now i want add loans i have created a new component but i want the url to have little different so you see now i created a new component and here i'm going to say loans slash add loan and here i'm going to say add loans component see now i'm forming my url any way i want whenever user enters loan slash add loan it has to come to this component go here and add that url and it says add loans work right so loan slash add loan right so that's how we are confirming the routes for our components you see how easy it is you can have any type of loans any type of routes you can now i'll tell you one single common mistake that i have seen so frequently right let me make that notes for you number 35 component routes right common mistakes lot of time people will add a lot of developers or i would say users developers will add will add slash in in path right this is the single most mistake i have seen in my most of the code reviews that i do right so if you see here so if you see here a lot of times here adding slash is fine here you should add it because it's after this but you should never start anything with slash you do this it's an error okay now you do this it's an error it will not compile if you do loans it will not work right if you and if you go to inspect element go to console you will see invalid configuration path cannot start with the slash right so you cannot have this slash here that's single most mistake the second most common mistake that i have seen is they will start putting component name in quotes right this is yet another common mistake that i have seen which is developers will start putting like this right it will result it is not a string it's a it is this class right it's a component class so you should not have it in quotes right the other thing that i have seen bad formed array bad formed array of routes right so these are commonly mistakes that you i've seen a lot of people make it make sure that you don't do it sometimes sometimes your editor right so now that depends right your editor is not importing components correctly correctly right it will not import like for example if you do not if your editor did not import this line and you save it so it says it's not there it cannot find the name right because it did not import it here correctly so make sure that you use visual studio code so that it tells you underlined red color and finally one last trick red color underline right means there is some error right make sure that you tackle that now if you say like this you see it tells you underline red color that there is some issue it says cannot find name right so you need to fix that now this is an array right now um i hope it's clear now i hope um after this episode you will be able to generate components and give them uh right uh what happened here let's see so i generated okay so there is no output because i did not have anything so loan works yeah that is working all right so i will give you an example of where we will use this so this is the loan manager application that we will be building live applications so you see loans loan types loan plans so we will have routing for each one of these right so when you click on them you will see the output coming for each of that right that's where it will get interesting and this is where the entire navigation will be utilized of clicking and navigating to that module that components child routes we will use learn all of that right so stay tuned for that it's coming soon we will build this live application together it's going to be a lot of fun but the important thing here is understand the fundamentals practice with me let me know if you have any doubts i'll be more than happy to help you this is just the start okay we have long way to go routing itself is very very huge complicated it can be complex if you don't understand the fundamentals we will take baby steps i will help you cover each and everything step by step stay with me stay in line and let's learn together in the next episode i will make you understand what is router outlet that's what you just saw in app component dot tms html right router outlet so we will learn about it why it is used how it is used how it will affect our code how the routing will be affected because of that we'll learn all about it so stay tuned for that all right thank you so much for joining see you in the next episode where we will learn about router outlet if you are liking my tutorial series please do consider buying me a coffee at buy me a coffee.com slash arc tutorials thank you so much don't forget to join me in the next episode of router outlet thank you so much

Channel: ARC Tutorials

Views: 7,019

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 tutorials, angular full tutorial series, angular 2021 full course, angular routing tutorial

Id: mQWGwfnI-eA

Length: 13min 5sec (785 seconds)

Published: Thu Nov 26 2020