Angular 10 Tutorial #37 - Multiple Router Outlets in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in today's episode we are going to learn about multiple router outlets in angular application in the previous episode we have learnt about router outlet we have seen the usage of it we have seen the syntax we have seen why it should be used in angular application but there are some questions around it like can there be multiple router outlets if yes how can we use them what's the syntax of a car incorporating router outlet we'll learn all about it in today's episode so if you have still have any questions or doubts i recommend you please drop me your queries and questions in the comments section below i'll be more than happy to answer and discuss with you this is part 37 of the angular 10 complete tutorial playlist i have planned around 100 tutorials for you we are soon going to hit the halfway mark i am very excited because we will be starting an angular live real-time application as well very soon so make sure you check out the description box which has all the links to the previous tutorials as well as to the github link which has all the notes and the code available these are all the topics that i have already covered in detail along with note so make sure you check it out for your reference if you really want to learn and master angular 10. if you have any doubts on any of these topics that have covered in detail please do let me know again in comment section more than happy to help you all right so in the previous episode we have learnt about router outlet today we will learn about using multiple router outlets in our application all right so just a quick background to our friends who are joining us new in this episode router outlet is a directive that's available from the router library where the router inserts the component that gets matched based on the current browser's url right you can add multiple router outlets in our angular application which enables advanced routing scenarios right by default there always has to be one router outlet which is treated as primary by angular right now the way to define multiple router outlets is by giving them a name right that way they become named router outlets right when you don't give any name it becomes primary and there is only one primary okay so any you can have multiple router outlets but you need to give name to them right so let's see how to do that um so open the application i'll open some nodes for you right so multiple router outlets right so first we can have multiple router outlets right by default there is one right there is always one router outlet in app.component.html file right when we don't provide any name any name for router outlet right it becomes primary right and there is only one primary right there should be only one primary right i will show you this also in just a bit of to why what happens if you give multiple we can define we can define multiple router outlets by giving name to them right that's why we call them call them named router outlets right why named because we are giving them a name right that's why we call them as named router outlets all right so let's go ahead so we have one primary already now let's define router outlet right i'll throw in one more and now we will give name to them so we will say name equal to say route 1 you can give any name there is no problem with that that's up to you whichever name you want to give i am giving route 1 route 2. you can give any name you want right so now see in this application now we are having more than one router outlet i told you in the previous application there has to be by default there is always one right so i should say at least one should be there right that's what we discussed in the previous episode so there is one already because i have not given any name this becomes primary primary router outlet these two are called named router outlet because they have a name what is the name route 1 route 2 now some people will say is it necessary to give route 1 route 2 no right we can give any name we want give meaningful name right don't give some random names which doesn't make sense right or you can give something like login you can give forgot password or some name which is matching or related to your application um don't give like a b c test one you know because if you give such things it doesn't have meaning to it right so i'll say add loans right i'll say add you can say edit right so whenever there is add loan i'll go here right so like this so have some meaningful names so that way you can build beautiful application and it also it's much readability right so those things you make sure that you do it correctly okay the ideal way is use single names if you want use for modules or something that's again how your project is described but i am just giving you a good practice so you can say add loan edit loan okay so save it so now you see um so i have now three route router outlets this is primary router outlet this is our named router outlet this is the third router outlet alrighty so enough of this let's get started into the code now let's go to our routing module okay here you will see this is the thing that we defined right so we have loans we have add we have loan types now in the after component put comma and save which outlet now this is the outlet that you defined here right which outlet you are talking about if you don't give anything it's by default primary right so remember this extremely important if in routing module if you don't define outlet it means it's primary right it means it's primary that's why when you don't see anything here it will directly go and the output will be the route will be processed by this right outlet but once you define and say i am going to have my outlet what is the outlet name say add loan this has to be same name that you defined of the router outlet else it will give error obviously right so make sure that you give the same name that you defined there in the routing module now let's start the application all right it may take couple of seconds to build but in the meanwhile if you are enjoying this tutorial please do hit the like button if you have any doubts drop them in the comment section and don't forget to subscribe to my channel thank you so much in advance all right almost there all right so now it's done let's go to our application alrighty so now let's just reload right uh why is this showing like this let's uh let's delete this let's clean up little bit all right so we have loans work let's see if there are any errors i don't see any okay we don't have any errors good so far so by default if i you don't have any that's what i told you if you don't have any outlet defined here in the routes in the routing module if you don't have any outlet it will take and match the router outlet that is the primary router outlet okay but if you have provided a name of the outlet it will go and match this that's what is our requirement and how do you do that that can only be done via the routes but if you do something like this it will not show you see it will not show you okay it will not show if you directly access it in the url this is very very important because half the time lot of people will miss it i'm telling you this will not work okay so make sure that this is line is underlined so make sure that you get that read that line again it will not show if you directly access it in the url the way you access it is with a primary you always with the primary url okay like like see this is main right this is primary this is secondary so how do you do that you will pass secondary okay and see carefully now guys because this is very very important here i am saying loans so it says loans work right that's the component main component now i am saying here i am saying route 1 colon ad oh so my outlet name is add loan okay so loans and then we will say add loan enter oh let's see it right here add so here the path is add you have to give the path and then the outlet name right so here uh the so this is little tricky guys so make sure you follow me add loan is the outlet name this is the secondary path this is the path add is the path now hit enter you should see both outlets right loanworks is the primary which is this add loan is your outlet name next is the parameter which is the secondary path of which should load next right so see this here i have listed it for you um here so you have the localhost followed so this route one is your outlet name add is the path right so i hope that's clear now let me just type it for you so the syntax should be like this on the similar lines it need not to be same it has to be something similar so here you will have primary route right angle bracket then you will have router outlet name followed by right so this colon followed by the secondary path right this is very very critical because if you make mistake it will show you lot of errors right so see primary route angle bracket router outlet name followed by the secondary path a secondary path or secondary component whichever you want to load path for that so here you have add loan and now it shows both so this if you open you would see it is matching two router outlets for you now so see now you have router outlet right which is loading app loans right here this one loanworks then you have router outlet named which is add loan see here and it's loading this right so the second one so that is how you can have multiple outlets multiple router outlets in angular application now you will ask me why are we using this okay don't ask me right the reason being that see this is a way to have multiple components right or multiple routes loaded you may need some scenarios but avoid avoid this use case in applications right should we use it no we should avoid using it why because you can inject you can inject very well uh components right instead of map matching the secondary route and doing it so you can do pretty much everything by injecting or mapping components so you don't because this url is not really friendly right url is not friendly um if you notice here if you notice here you're passing brackets and then following with that so it's not really user friendly and it's not bookmarkable right so it's not really useful in a sense for that bookmark a bull url okay now i can tell you i have worked in very very large complex applications in my past experience so i can tell you that i have not personally seen this used a lot okay so for the sake of your understanding and knowledge i have created this tutorial to show you but will it be really used in real time applications i can tell you that it's not i can tell you it's not um it's not used um very freak or um not not used very much is what i would say um i don't think as a beginner you should focus too much on it as well uh i will try and come up with use cases where we can have such use cases but as at least as of now this is what you should be knowing of how to use how to pass all right i think that covers pretty much everything that i wanted to cover today in the next episode um i will cover about a routing strategy that's used in angular applications and how can we customize what are the different strategies that you can implement in your application if you like my work if you like my tutorials please consider buying me a coffee at buy me a coffee.com slash art tutorials join me in the next episode where we'll talk about different types of routing strategies and will implement some routing strategies in our application thank you so much for joining see in the next episode

Channel: ARC Tutorials

Views: 12,184

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 complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular full tutorial series, angular 2021 full course, Angular Multiple Router Outlets

Id: 1U54MbRHtxs

Length: 15min 14sec (914 seconds)

Published: Sat Nov 28 2020