Multiple Router Outlets in Angular using Named Outlets (2021)

Hi everyone, welcome! From this video  you will know what is "named router   outlet" in angular router and how it allows you  to have multiple activated roads at the same time.   My name is Dmytro Mezhenskyi and  before we dive into the code,   please subscribe to this channel and don't forget  to check out my Angular Material Theming video   course the link and promo codes will be in the  video description! And now, let's move forward.   All right guys let's imagine that we're going  to build the application which consists from   some navbar with links to different entities then  we have some sidebar where we render previews for   this entities and if we select one we see more  details in this bigger area yeah it might be   some complex form here and the same design we see  four products as well so sidebar with previews and   bigger area reserved for product details and  despite the sidebar for products and users   might look similar in fact they may have  completely different layouts like products   may have also some sub navigation where i can  navigate between different type of courses   so yeah it's highly dynamic environment and  additionally to these requirements we have   uh another and namely it should be a stateful  so means that if i copy current link of this   application and send it to another user per email  or whatever when they open this link they should   see the same state so they should be selected  products page uh courses for angular and namely   material theming course should be rendered  in product details so it should be restorable   and besides this it should have independent  navigation i mean sidebar and product details   so if I navigate from angular to courses it should  not affect anyhow the product details window and   so on and so forth. So basically we want to fork  our activated roads to two independent instances   which live independent life yeah and this is  where named router outlets can help us good   there is a application which looks very similar  to what you have seen before on the slides and   i prepared this application for this particular  tutorial and you can see the user page which has   a kind of list of different users and if i click  on some of them i see some user details yeah   and if i go to photos i completely switch  the page and i see kind of previews right   and i can click and see also details and as i  said the behavior is a little bit wrong or not   wrong usually it's fine but this is not behavior  i would like to have i want when i navigate from   from photos to user i want that photos details  stays on the page so it should not switch the   page completely and let's refactor it and make it  work as we expect so before we start refactoring   just give me a few minutes to show you the code uh  inside so there is the app component where we have   toolbar and we have the content where we  have this directive router outlet where we   render uh some user or photos page and this  is our approaching you can see this is very   similar we do redirect from the root road to the  users and for users we render user page component   and then we have child road for user  id which renders already a user details   component and let's have a look at the user i  will show only this part because photos it's   pretty much the same as a user so it consists from  three three components first one it's a page which   has just a sidebar and section four details  inside the sidebar we render user sidebar   and here we have the router outlet where we render  this child road for users or basically details   sidebar is very simple component where i just pull  users from some remote server and render it within   *ngFor a loop right here. Details components  are pretty much similar to what I have   here. So I read the id param from my rout... so  it means this one this parameter I read here...   here I fetch the param and do a request to the  server to fetch data for this user with this id.   Very simple yeah now let's go back to app  component and let's talk a little bit about router   outlet most in most of the cases you use it like  this so this is so-called primary router outlet   right and not everyone knows that this directive  has another property and this property called name   and here you can already define some sort of  name for your router outlet and i will call it   details so here we're going to render our uh  detail section uh this the uh big one right   and uh i would say if we leave it as it is uh  the our layout will be broken a little bit so   i would suggest you to grab  this uh part from user page and   we will adjust it like this so instead  user sidebar we're going to render our   primary road because we need to keep at least  one primary road so i will use it for our sidebar   and for the details we're going to use the named  road which is actually entity details right so so   far so good it should work fine i save it and the  next step is to adjust our app routing because now   we have uh two router outlets and routers should  understand how to resolve it and we have to help   router with this so this first road stays as it  is but users wrote we have to adjust a little bit   because we are not going to render the user page  component anymore instead we're going to use the   sidebar component user sidebar component yeah  because primary route reserved for the sidebar   part cool now we don't need children as well  because we don't have any more this parent-child   relationships they uh they are independent roles  already so we put it next uh right after the users   and here i will adjust it i will add something  like user id like this and we going to for this   route uh we're going to render the user details  component but additionally we have to define in   which exactly router outlet we have to render  it and in order to do this we should say that   we should add the property outlet and say in  which exactly and in my case this is details   here we go now we can save actually and test it so  i go to my application i navigate to users and you   can see that users were created as expected right  however we don't see any details even if we click   we see nothing because um currently we have wrong  link here yeah which leads to user slash id but   we don't have such a router already and we kind  of forked our router to do independent ones so   uh how we can resolve it in the uh url and  actually angular introduces the alternative syntax   for named um for named rotor outlets  and it starts uh up with the parenthesis   and inside parenthesis you say the name  of the router outlet where it should be   rendered so it is details and then  after a semicolon you have to define the   path uh to this to to the component which  you want to render so this is in our case   user slash id right so i say that it should  render user one let's keep a user with id one   yeah and now if i navigate to this path you will  see also user details was rendered instead of a   router outlet with name details yeah it is broken  a little bit we will fix it in a minute uh this is   just a css issue but this is how this is kind of  alternative router state for our named road okay   so let's go back and i will fix this part by  adding display flex and hopefully it should   help us sorry it should be added to  uh to the content not to the host   and now yeah you can see that everything works  fine all right but it's uh kind of annoying   to manually write uh this syntax right so we  should do it automatically by clicking on some   user and let's adjust it and i will go to the user  sidebar and here we have to modify router link and   here we're going to cut this part and how we'll  do this because now we have two roads kind of yeah   we have to say that for the first road please uh  let's stay on the same uh state on the same path   so i provide just empty string and then i have to  provide the additional config this is the object   and this object has property outlets which has  another object and here the key is the router   outlet name where we want to set the state so in  our case this is details okay and here already uh   the value will be some array and i say that okay  it should be user and the second parameter it's   user id so it will be mapping this  path all right so and now if i save it   and go back and maybe let's remove it or yeah  let's remove it and now if i click you can see   that we were navigated automatically to proper  route yeah and i can switch between them   and everything works as expected now we have  to do pretty much similar for photos right so   let's do it um here we have to say that for  photos we're going to render photos sidebar   component then remove children and introduce the  new road and here will be photo id oops i forgot   slash photo id and it renders photo details  and we say that it should be rendered inside   outlet also details yeah and let's immediately  adjust the road router link as well so i will copy   this part here and for photos i will do the same  here we go but instead here is the photo and a   path to the photo as well good now we can check if  it works fine so here everything stays as expected   then check i navigate to photos but user details  stays because we changed only primary road and it   was not and our details was not affected by this  so the part which is response which associated   with the primary road was switched but not the  named part yeah so it allows us maybe maybe we   would have functionality like drag and drop yeah  from here uh from the sidebar to some user details   why not that could be such a workflow um and but  we we will we will not implement this in this   video but if you ask me in the comments why not we  could do it however this is how it kind of works   yeah two independent roles everything is fine but  here's the question how we can close the roads   yeah maybe we would uh like to do it as well and  you in order to do this you just have to provide   null uh here for other value for details  outlet and let's quickly do it maybe in   some app component i will i will introduce  the link here and this link is going to be   the material button with text maybe close  and here's the router link which should   lead to empty path but here we provide  uh outlet and here should be details   and we say that it's gonna be null so if i  navigate here and click close you can see that   our details disappeared or the button stays maybe  it would make sense to put it somewhere inside   this detail component or or you know you know what  uh by the way if you didn't know rotor outlet has   some events like activated i believe yeah  and we could handle it and hide the button   depends if it's activated we can show button  when it's deactivated we can close this but   we would need to introduce some property here  let's say is button visible which is by default   it is false and if we activate it should be like  a true and if deactivated uh rotor outlet or road   for this outlet we will say that it should be  false uh like this and here we have two for the   button create something like and display  if uh the button is visible all right so   uh i navigate we see close button when i close it  disappears button and disappears details i don't   know maybe this is not the best solution for this  definitely but i just uh yeah i wanted to show you   these events maybe you didn't know about this so  now you know and you can catch them somehow and   you know do your some custom logic all right guys  that was it i hope the information was useful and   if so please share this video with your colleagues  because it is really the best thing you can do   in order to support my channel besides this  don't forget to leave your honest feedback   in the comment sections because eventually  it allows me to improve my content quality   for you i wish you productive week ahead  stay safe and see you in the next videos

Channel: Decoded Frontend

Views: 41,864

Keywords: multiple router outlets, Multiple router outlet in angular, angular multiple router outlets, angular named outlet not working, angular named routes, angular router outlet, angular auxiliary router outlet, angular routing, angular 12, Web development

Id: 9fH09nJGm-U

Length: 18min 40sec (1120 seconds)

Published: Tue Aug 17 2021