Multiple Router Outlet | Nested routes | Angular Project Layout | Angular 16

hi guys this is in this video we will learn how to use our nested routes and how to configure our nested routes in angular and also we will see the layouting of our angular applications how to use multiple router outlets in our application let me quickly jump into one more slide here I'll be explaining what we are doing over this video the thing is we will be creating two layouts for us one is auth layout and one is admin layout where the auth layout will not have any navigation bar and admin will have a navigation bar and under admin we have admin home component admin profile component until under profile component we have something called as change password where the URL will be admin slash profile slash change password whereas the no navigation bar that means whatever the components you are configuring like login and register that will not have navigation which comes under the auth layout whereas home home profile change password this contains a post login layout that is nothing but admin layout and it will have set of navigation bar so this what we'll try to configure over here now let me quickly jump into Visual Studio code and create all these layouts for our sake so let me go into Visual Studio code first thing is we need two layouts for that sake let me create one folder called as layouts and inside this layouts let me create two components so let me go into layout CD space SRC and I want to go inside the layouts and here I want to create NG generate component and the component name is admin layout and it is just a normal component so it is not able to find the module because it is not having immediately after this layout so what I can do is I can just skip for now NG generate component and the component name is admin and I'll just keep the import and later we will Import in our app module so here we have admin component now let me create our auth component auth and hit enter so it created the auth component let me inject them in our app component let me go into app.module.ts and inside this we have two components that is auth component and admin component save this so we have app auth and admin component so let me go here and see here we have two layouts and let me create one more thing or just move this layouts inside our app so that it will be very easy for us so yes Imports I want to change the Imports and done save this now we are done with the auth and admin let me create one more thing called as of views so new folder and views or you can just create it as a Pages if you want or views anything is fine so let me go here and create a new folder where my folder is admin folder and let me create one more folder called as auth folder so these are my two different folders whatever the components which are related to authentication that means before login that components I'll create inside our auth and whenever I want to create something which are related to admin I'll create inside the admin and each and every component will try to make it as modular and also we will try to focus on the lazy loading so let me go into our CD dot dot and let me go into our layouts or let me go into views directly so let me go into the views and create CD space auth first we'll create two components that is login and register NG generate first I'll create a module and the module name is login and I want to have a routing for this because we are going to use lazy loading and hit enter now we have created a login module and if you see auth we have login module and in the same place I just want to use something called as component and I want to skip the test files skip hyphen tests and hit enter skip hyphen tests and hyphen hyphen enter so now we created our login component and that has been injected into our login module in the same way let me create NG generate module and the module name is register and this should have the routing file again and hit enter NG generate component and the component name is register we want to use skip hyphen test because I don't want to concentrate on the test files now hit enter now we have two modules that is register module and also login module if you see here the login and the register are under auth so we are done with the auth layout so first we'll configure all our auth layout content let me go into app.component.html and we have the router Outlet over here and let me remove this save this so let me go into our routing file app routing and inside this routing I don't want to use direct paths for example I have a path with an empty and I want to redirect and the redirection is something like slash admin slash login I want to go inside login and I want to give a path match which is full so we are done with the default configuration of our path and let me create one more path called as admin and this admin is using a component and the component is admin layout component or admin component and inside this admins we need some set of routes for example inside the admin we need home and profile and inside the auth we need some set of auth components so let me create auth first and let me use auth layout or auth component now let me use this as auth so now inside this we have some set of children why we are saying children because it is inside auth without auth I don't want to access login without auth I don't want to access register so for that sake we will be using something called as children component so children is a set of array where its parent path will always point to auth so let me go here and create a path for us with an object's path and empty where it should have a login and if you use load children I want to load this children component from our import and I want to use dot slash view slash auth slash login slash login dot module and this will give us a module with a promise based M implies m dot login module so we are done with the login module configuration but inside this module again we have one more routing let me go into that routing and configure our path again with a default path as empty and the component is login component so let me use login component save this now we are done with the login configurations let me go here and see if you see here 4200 if I give default it went to auth slash login but it is showing auth works but not the login works why what's the problem here because now for this auth layout the main component is app component but for our login component the child it is a child for your art so that means we should have a router Outlet inside your authentication component let me go into auth component and create one router Outlet till now we learned only one router outlet but now we are going with multiple router Outlets so let me use a router Outlet here save this now you can see auth works is an auth component and login works is a login component when I go with register then it will go into register works let me go here and go to your app routing and inside this routing let me go with one more object called as path and I want to go with register and this register should contain a load children inside this we can use import and Dot slash View slash auth slash register slash register module and we have a Performance Based M implies m dot register module so we are done with the registration module configuration let me close this and save this now let me go into register and inside the register let me go into routing and give the default path over here path is empty and the component is register component and save this now you can go here and just navigate to register you can see auth works is a common place but register works is something which is like a placeholder depending on your url that means let me go into auth or component dot HTML and instead of auth Works what I'll do is I'll say that I have no navigation that means you will not have any navigation whatever you are writing over here that means whenever you go to register you will not see any navigation whenever you go to login you will see the login and not the navigation so this is completely restricted to the non navigation bar whereas my admin layout will always depend on the navigation so let me clear this off close all we are done with the auth navigations and let me go into admin navigation so for that sake let me go into our routing that is app routing but this time I don't want to use this now I want to go with admin that is nothing but one more path if you see here we are done with the auth now we have one more part called as admin these two are at the app level so let me go here and create a path which is admin path and the component is admin component and we have something called as children for this and what are the childrens we have we have something called as a path where we have something like home and we want a home component let's go and create our home component CD dot dot and I want to go into admin layout or admin views and I'll create in g generate home with a routing module that is nothing but NG generate Module home hyphen hyphen routing and hit enter we have created a routing module NG generate component and the component name is home and I want to skip the test files hit enter now it created the component in this particular module and also we want something called as profile NG generate module and the module name is profile and we want to use routing and hit enter now let me go here NG generate component and the name is profile and I want to skip the test file skip tests enter now inside my profile I have something called as change password so my structure would be something like inside the admin we have profile inside the profile we need to have a change password let me go into profile CD space profile and I want to create a NG generate module and the module name is change password and hit routing now we got change password let me go into this component NG generate component and the component name is also same change password hyphen iPhone skip hyphen tests enter so now it created our change password also but this change password is inside profile until unless I go into profile I should not see change password for that sake first is admin slash home when we give admin slash home it has to load my component that is home component import and the import will contain dot slash views slash admin slash home slash home module and Dot then with a module over here and the module is home module m dot home module and done with the home module now let me go into home module routing and give the default path and the path is empty and the component is home component so this home component will work only in the admin layout for example here we have admin layout inside this whatever the router Outlet or wherever we are writing the router Outlet at that particular place this home component will render or all the children's will render let me go into HTML file and create one router Outlet so we have three router Outlets as of now one is for admin one is for auth and one is for root component that is app component let me go here and give something like admin slash home and hit enter now you got admin works but as per our knowledge admin should have a navigation bar so for that's it let me go and create our navigation navigation comes here navigation bar comes here so whatever you are writing inside this that will only affect the routes which are mentioned under this children but not under this children so these children will only render at this auth this children will only render at admin so let me go and create one more path for us and the path is profile and the profile contains a load children and this load children will import something called as dot slash views slash admin slash profile slash profile module and this has something called as M implies m dot profile module and let me go into profile module and configure the default path over here go here and just use something called as a path and inside this path I have something called as component and that component is nothing but your profile component and save this now let me use one more path for this actually we have something called as change password inside the profile we have change password so for that sake let me use a change password which is inside our profile without profile I can't access this change password so inside this we have a component and the component name is change password but here there is one problem actually that should be inside our profile so we can do two two things one is we can create a component here or if you want you can even create some set of components as a children because I want to showcase the profile on the top and below I want to change my password so let me go here and use a path where the path is change hyphen password and this password is having a module so old children and let me import our DOT slash change password slash change password module dot then and M implies m dot change password module that means it will be under your admin slash profile slash change password whatever you are seeing on the admin you can see whatever you are seeing on the profile you can see under that you will be having this change password let me go into the profile component and inside this let me go into HTML now I am creating this as one more router Outlet router hyphen outlet and go here so profile will come here profile will be here that means this will be constant whenever you go with the profile slash change password this will be common if you want to go with profile slash some settings then it will be common so let me go to the browser and check that now I'm in home let me go with all the navigations I will go with profile you will be seeing only profile will work here along with the navigation if you go with change password along with the profile you will be seeing three components one is navigation bar and one is profile and one is change password change hyphen password and hit enter now you are not able to see that let's see the path change hyphen password so let me copy this and okay so let me go into the module and we have we didn't configure the default route for our change password so give empty and the component is change password component and hit enter save this now go here you can see change password Works profile works and navigation if you go only with the profile you will be seeing only profile and inside this profile we can navigate to anything and then we have something called as admin slash profile so we have created everything in this way now let me go into our login and just create all the set of routes with program so let me close this and go into our login component dot HTML and create one button over here where it will be something like navigate to home and save this now let me use click event I can use something like click event and navigate our home I'll just use home and just copy this home component and go to your login and create a Constructor where you will be getting a private router with router import and now let me go here and create a home method inside this router dot navigate I want to go into the home so before going into home I want to go into admin and inside that admin I have home let me give semicolon now go here you can go into our login auth slash login hit enter now you can see a login and I have no navigation bar here and then I am clicking on navigate to home when I click on navigation to home then it will remove this and remove this and then it will show you only that home component let me go here along with the navigation so here's you can see navigation and homeworks that means we are having a navigation bar over here let's create our navigation bar now what I'll do is where this navigation exists actually speaking it is present in our admin so if you go to admin.html here is the navigation so let's create a div and inside this div let me create some set of buttons button and I'll be creating something called as profile and whenever I click on this that means I want to go into profile method and let me copy the same thing and put it over as home and this one I'll make it as home so let me copy this home and go to your admin and create a Constructor inside this Constructor let me give private router and the router service here we have home and whenever the user clicks this this dot router dot navigate off I want to go into our home page that means admin and whom so because home is a child of admin in the same way let me copy this and put it over here we have something called as profile let me copy this and put it over here with admin slash profile save this and save this now we have one more thing called as logout logout and let me use something called as log out here copy this and go to your admin and create a logout this dot router dot navigate of auth and inside auth I want to go into login so let me save this now go here we have three buttons let me click on home we are already in home profile we are in the profile but you are not able to see the change password I'll tell you why we are not able to see that and when you click on logout you are out of dashboard and you are going back to your login screen where you don't have navigation at all let me click on this and go to profile inside the profile I want to show something like change password so what I'll do is profile itself has some navigation let me consider so here we have something called as div and inside this div I have something called as a button and this button is something like change password and in the same way I'll just create one click event called as change password and save this so whenever I click on this change password method I need to call one method and this method it should navigate us to change password private and inside this we Constructor inside this we have a private router and this has a router service and we can use this dot router dot navigate off I want to navigate to admin first and inside that admin I have something called as profile inside that profile I want to go with change password when I you when the user clicks on this it has to navigate to change password let me go here and you have you are in the profile you have changed password let me click on this you can see change password for example inside this itself you have one more thing like settings so let me go and create our settings component NG generate module and the module name along with settings we want a routing and NG generate component called as settings and I want to skip this test files skip tests now we created a settings and we'll be having that inside our profile so let me go into profile and create one more route so the route is something called as path where the path is settings and load children with import of I want to go with DOT slash and the settings slash settings module dot then of M implies m dot settings mode so inside the settings module again I'll create a route for us which is a default route and the path is empty and the component is settings component so to use this settings component we need profile so let me check that now we are in the change password instead of change password I'll give settings so it is not found we didn't configure the not found Route so let me use admin slash profile slash settings enter so you can see setting works so change password we have in the same way let me create one more thing called as settings so let me go here and use settings and create this method over here go to the TS file and inside this we have settings and inside the settings this dot router dot navigate of admin comma profile comma I want to go with settings save this now go here you have two buttons let me save all file and save all go here now you have changed password change password both the labels are same let me go here and change it to settings settings and save this now whenever I'm in the profile only at that particular time you can see this change password and settings but if you go to home you cannot see that that means this change password and settings are the sub navigations only in the profile when I click this you are in change password and I click this it is in settings by default it will be in the profile page so let me go to home now home page and this is something like change password and settings and when I click on change password this is one router Outlet so that that is how we can configure whole application let me summarize it will be bit confused but this is the way which we generally use so that you can segregate all the components and all the modules and also you can create your own lazy loadings along with your sub navigations as well so let's understand this so now we have created something called as login so this login is child of your auth that means inside the auth whatever you want to surround these components that can be applicable all the auth routes can be surrounded with a particular common code for example here I wrote I have no navigation bar but if you go into register also you will see the same thing if you go to login also you will see the same thing why because in your routing you have configured auth contains all these navigations that is one point when I go here we have a admin layout and this admin layout has one navigation and a common placeholder so whenever there is a change with admin slash something that will be shown here and whenever I change to admin profile profile will be shown here that means home profile and logout is a common navigation for your admin layout when I go to profile profile has its own layout that means inside the admin layout you have profile layout inside the profile layout there is something called Outlet here you can see one router outlet and the same router Outlet is used to render your components based on your navigations and that will not change your admin layout so admin layout password layout and then that password related stuff over here so we saw that how they can be manipulated and how they can be configured now we'll see how the folder structure is if you see here it is very simple folder structure you have views inside the views you have admin views all the admin related stuff configured over here and you have auth auth related stuff configured over here and inside the admin we have profile all the profile related components and the modules are configured inside this so that it will be a sub module and sub routing for our application and it makes our application very speed because every module is lazy loaded but there is one problem over here the problem is for example I am in auth slash login now the user is able to login by using the route parameter like home now you can see without any authentication I am able to navigate to the dashboard or home page or any internal application or secured data which we are showing inside the route but we need to restrict this route that means until unless I log in the person should not go into home should not go into profile or change password or settings anything should not be accessed that is called as authorization and authentication so we are trying to use this authorization and authentication techniques to avoid this that is going inside the routes without login and only authorized routes can be accessed that how we can configure to learn that we need to know about the guards and how to handle the guards and how to deactivate some set of routes and how to to activate some set of routes we'll discuss about this in the upcoming videos so this is only concentrated on the layouting and also how to write all the subroots and the routes whenever you want to use and this also can be handled by Standalone components as well if you want please comment in the below so that I can do in the Standalone as well but it will be mostly same the only thing with change is only the configuration part or the routing part but if you're really interested to know about it and if you want to experiment it just pick in the comments I'll just go with the explanation in my upcoming video hope you like my explanation if you like my video like share subscribe to my channel for more updates signing off thank you

Channel: Techshareskk

Views: 5,874

Keywords: how to use angular nested routes, nested routes in angular, children properties in angular, loadchildren in angular, angular 16 routes, angular 16 nested routes, angular 16, routing in angular, advance routing in angular, routing from beginner to advance, routes from end to end, routing end to end in angular, nested routing in angular, nested routes from end to end, children in angular, lazy loading in angular, techshareskk angular 16

Id: 5gF8Jjsv18U

Length: 27min 59sec (1679 seconds)

Published: Tue May 30 2023