Multiple Router Outlets in Angular using Named Outlets (2021)
Multiple Router Outlets in Angular using Named Outlets (2021)
Multiple Router Outlets in #Angular allow you to manage complex router states, allowing you to fork your router into multiple active paths which are independent from each other. It might be useful to display different dialog windows, sidebars and other layouts which should depend on your router state. I hope you will find nice use-cases for it in your angular applications. Enjoy watching!
📣 Become a Pro in Angular Material Theming (Advanced Workshop) 📣
https://bit.ly/angular-material-themi…
✅ Use 10%-off coupon code: YOUTUBE_DISCOUNT (Only 2 coupons left)
📣 Blazing fast GraphQL Backend just in 1 Day with Hasura Engine 📣
https://bit.ly/complete-hasura-course
✅ 20%-off coupon code: HASURA-EASY-START
Time Codes:
00:00:00 - Intro;
00:00:29 - Describe a problem;
00:02:51 - Project intro;
00:06:00 - Implementation of named router outlet;
00:18:07 - Outro;
Link to the source code:
https://github.com/DMezhenskyi/angula…
#angularrouter #angulartip #webdevelopment
Content
3.04 -> Hi everyone, welcome! From this video
you will know what is "named router
8.08 -> outlet" in angular router and how it allows you
to have multiple activated roads at the same time.
14.8 -> My name is Dmytro Mezhenskyi and
before we dive into the code,
18.24 -> please subscribe to this channel and don't forget
to check out my Angular Material Theming video
23.44 -> course the link and promo codes will be in the
video description! And now, let's move forward.
29.76 -> All right guys let's imagine that we're going
to build the application which consists from
35.12 -> some navbar with links to different entities then
we have some sidebar where we render previews for
42.64 -> this entities and if we select one we see more
details in this bigger area yeah it might be
51.44 -> some complex form here and the same design we see
four products as well so sidebar with previews and
63.28 -> bigger area reserved for product details and
despite the sidebar for products and users
71.28 -> might look similar in fact they may have
completely different layouts like products
79.04 -> may have also some sub navigation where i can
navigate between different type of courses
87.76 -> so yeah it's highly dynamic environment and
additionally to these requirements we have
95.6 -> uh another and namely it should be a stateful
so means that if i copy current link of this
105.76 -> application and send it to another user per email
or whatever when they open this link they should
115.6 -> see the same state so they should be selected
products page uh courses for angular and namely
124.32 -> material theming course should be rendered
in product details so it should be restorable
133.28 -> and besides this it should have independent
navigation i mean sidebar and product details
141.6 -> so if I navigate from angular to courses it should
not affect anyhow the product details window and
151.68 -> so on and so forth. So basically we want to fork
our activated roads to two independent instances
162.48 -> which live independent life yeah and this is
where named router outlets can help us good
172.88 -> there is a application which looks very similar
to what you have seen before on the slides and
180.88 -> i prepared this application for this particular
tutorial and you can see the user page which has
188.8 -> a kind of list of different users and if i click
on some of them i see some user details yeah
196.56 -> and if i go to photos i completely switch
the page and i see kind of previews right
205.2 -> and i can click and see also details and as i
said the behavior is a little bit wrong or not
214 -> wrong usually it's fine but this is not behavior
i would like to have i want when i navigate from
222.8 -> from photos to user i want that photos details
stays on the page so it should not switch the
232.4 -> page completely and let's refactor it and make it
work as we expect so before we start refactoring
243.44 -> just give me a few minutes to show you the code uh
inside so there is the app component where we have
252.48 -> toolbar and we have the content where we
have this directive router outlet where we
259.28 -> render uh some user or photos page and this
is our approaching you can see this is very
266.96 -> similar we do redirect from the root road to the
users and for users we render user page component
276.16 -> and then we have child road for user
id which renders already a user details
284.64 -> component and let's have a look at the user i
will show only this part because photos it's
290.72 -> pretty much the same as a user so it consists from
three three components first one it's a page which
298.96 -> has just a sidebar and section four details
inside the sidebar we render user sidebar
306.08 -> and here we have the router outlet where we render
this child road for users or basically details
316.48 -> sidebar is very simple component where i just pull
users from some remote server and render it within
327.28 -> *ngFor a loop right here. Details components
are pretty much similar to what I have
334.56 -> here. So I read the id param from my rout... so
it means this one this parameter I read here...
344.96 -> here I fetch the param and do a request to the
server to fetch data for this user with this id.
354 -> Very simple yeah now let's go back to app
component and let's talk a little bit about router
362.4 -> outlet most in most of the cases you use it like
this so this is so-called primary router outlet
370.96 -> right and not everyone knows that this directive
has another property and this property called name
383.76 -> and here you can already define some sort of
name for your router outlet and i will call it
391.36 -> details so here we're going to render our uh
detail section uh this the uh big one right
401.84 -> and uh i would say if we leave it as it is uh
the our layout will be broken a little bit so
409.2 -> i would suggest you to grab
this uh part from user page and
415.52 -> we will adjust it like this so instead
user sidebar we're going to render our
423.92 -> primary road because we need to keep at least
one primary road so i will use it for our sidebar
433.52 -> and for the details we're going to use the named
road which is actually entity details right so so
444.4 -> far so good it should work fine i save it and the
next step is to adjust our app routing because now
453.2 -> we have uh two router outlets and routers should
understand how to resolve it and we have to help
461.12 -> router with this so this first road stays as it
is but users wrote we have to adjust a little bit
470.88 -> because we are not going to render the user page
component anymore instead we're going to use the
480.48 -> sidebar component user sidebar component yeah
because primary route reserved for the sidebar
488.48 -> part cool now we don't need children as well
because we don't have any more this parent-child
497.12 -> relationships they uh they are independent roles
already so we put it next uh right after the users
507.68 -> and here i will adjust it i will add something
like user id like this and we going to for this
516.08 -> route uh we're going to render the user details
component but additionally we have to define in
523.12 -> which exactly router outlet we have to render
it and in order to do this we should say that
531.12 -> we should add the property outlet and say in
which exactly and in my case this is details
539.36 -> here we go now we can save actually and test it so
i go to my application i navigate to users and you
551.28 -> can see that users were created as expected right
however we don't see any details even if we click
562.8 -> we see nothing because um currently we have wrong
link here yeah which leads to user slash id but
571.28 -> we don't have such a router already and we kind
of forked our router to do independent ones so
580.48 -> uh how we can resolve it in the uh url and
actually angular introduces the alternative syntax
592.72 -> for named um for named rotor outlets
and it starts uh up with the parenthesis
601.28 -> and inside parenthesis you say the name
of the router outlet where it should be
608.88 -> rendered so it is details and then
after a semicolon you have to define the
619.52 -> path uh to this to to the component which
you want to render so this is in our case
626.48 -> user slash id right so i say that it should
render user one let's keep a user with id one
639.68 -> yeah and now if i navigate to this path you will
see also user details was rendered instead of a
648.96 -> router outlet with name details yeah it is broken
a little bit we will fix it in a minute uh this is
656.48 -> just a css issue but this is how this is kind of
alternative router state for our named road okay
667.36 -> so let's go back and i will fix this part by
adding display flex and hopefully it should
678.8 -> help us sorry it should be added to
uh to the content not to the host
685.44 -> and now yeah you can see that everything works
fine all right but it's uh kind of annoying
694.08 -> to manually write uh this syntax right so we
should do it automatically by clicking on some
702.08 -> user and let's adjust it and i will go to the user
sidebar and here we have to modify router link and
713.44 -> here we're going to cut this part and how we'll
do this because now we have two roads kind of yeah
723.6 -> we have to say that for the first road please uh
let's stay on the same uh state on the same path
734 -> so i provide just empty string and then i have to
provide the additional config this is the object
743.04 -> and this object has property outlets which has
another object and here the key is the router
753.76 -> outlet name where we want to set the state so in
our case this is details okay and here already uh
764.08 -> the value will be some array and i say that okay
it should be user and the second parameter it's
775.52 -> user id so it will be mapping this
path all right so and now if i save it
785.36 -> and go back and maybe let's remove it or yeah
let's remove it and now if i click you can see
795.44 -> that we were navigated automatically to proper
route yeah and i can switch between them
802.32 -> and everything works as expected now we have
to do pretty much similar for photos right so
809.12 -> let's do it um here we have to say that for
photos we're going to render photos sidebar
819.6 -> component then remove children and introduce the
new road and here will be photo id oops i forgot
831.44 -> slash photo id and it renders photo details
and we say that it should be rendered inside
839.76 -> outlet also details yeah and let's immediately
adjust the road router link as well so i will copy
851.92 -> this part here and for photos i will do the same
here we go but instead here is the photo and a
863.92 -> path to the photo as well good now we can check if
it works fine so here everything stays as expected
874.64 -> then check i navigate to photos but user details
stays because we changed only primary road and it
885.84 -> was not and our details was not affected by this
so the part which is response which associated
894.24 -> with the primary road was switched but not the
named part yeah so it allows us maybe maybe we
904.08 -> would have functionality like drag and drop yeah
from here uh from the sidebar to some user details
911.44 -> why not that could be such a workflow um and but
we we will we will not implement this in this
919.12 -> video but if you ask me in the comments why not we
could do it however this is how it kind of works
929.68 -> yeah two independent roles everything is fine but
here's the question how we can close the roads
935.6 -> yeah maybe we would uh like to do it as well and
you in order to do this you just have to provide
945.12 -> null uh here for other value for details
outlet and let's quickly do it maybe in
952.72 -> some app component i will i will introduce
the link here and this link is going to be
962.8 -> the material button with text maybe close
and here's the router link which should
973.52 -> lead to empty path but here we provide
uh outlet and here should be details
985.2 -> and we say that it's gonna be null so if i
navigate here and click close you can see that
993.76 -> our details disappeared or the button stays maybe
it would make sense to put it somewhere inside
1000.48 -> this detail component or or you know you know what
uh by the way if you didn't know rotor outlet has
1010.32 -> some events like activated i believe yeah
and we could handle it and hide the button
1018.88 -> depends if it's activated we can show button
when it's deactivated we can close this but
1025.12 -> we would need to introduce some property here
let's say is button visible which is by default
1032.96 -> it is false and if we activate it should be like
a true and if deactivated uh rotor outlet or road
1044.64 -> for this outlet we will say that it should be
false uh like this and here we have two for the
1054.88 -> button create something like and display
if uh the button is visible all right so
1062.48 -> uh i navigate we see close button when i close it
disappears button and disappears details i don't
1070 -> know maybe this is not the best solution for this
definitely but i just uh yeah i wanted to show you
1077.44 -> these events maybe you didn't know about this so
now you know and you can catch them somehow and
1084.96 -> you know do your some custom logic all right guys
that was it i hope the information was useful and
1091.28 -> if so please share this video with your colleagues
because it is really the best thing you can do
1097.44 -> in order to support my channel besides this
don't forget to leave your honest feedback
1102.72 -> in the comment sections because eventually
it allows me to improve my content quality
1109.44 -> for you i wish you productive week ahead
stay safe and see you in the next videos
Source: https://www.youtube.com/watch?v=9fH09nJGm-U