Multiple Router Outlets in Angular using Named Outlets (2021)

[@davicampos802]

I didn’t watch the video yet but I know it will be amazing. I am loving these videos about angular

[@maSterVqne]

you where not wrong !

[@DecodedFrontend]

Thanks, Davi! 😀

[@khumozin]

Nice explanation! Please do a drag and drop tutorial

[@denisbielishev]

Drag and drop would be really useful and cool

[@yevhen3934]

Great content! You talk with great interest so that we cannot stop watching the video. Thanks for the new videos! By the way, the idea of ​​implementing a drag&drop in the application is actual. So, I would be glad to see it :)

[@FredoCorleone]

It would be nice to have a recap screen at the end of each video with a bullet list of things you have learnt, for example this video would be like: - Can define different indipendent routing using "name" attribute on the router outlet and the "outlet" property on our route configuration; - Use empty string and "outlets" property in Link Param Array to navigate to a named router outlet; - Router outlet has active and deactive events you can use to show/hide controls to the user.

[@DecodedFrontend]

It is a great idea! Thank you :)

[@radvilardian740]

it's been a while knowing angular, but this stuff is a new one for me, definitely great channel, please share more about advamced Angular stuff.

[@jonadersonmoura6903]

Your content is very good!!!

[@dewinchy]

Thanks for your example, it is very nice and shows basically all of the elements one would need. I personally had the problem that I've tried to place the named outlet inside of a component that would be loaded by the "primary" (unnamed) outlet. This didn't work so after realizing I would need them in parallel it's working properly.

[@alex_chugaev]

Great content! please keep it coming 👍

[@niall5447]

Keep the videos coming, learning angular as I. These videos are a life saver

[@VijayYadav-jk7ne]

Superb my dear.... It's a very informative video.

[@DovorolMods]

По акценту почув що ти слов'янин але глянув на канал і був приємно вражений, дякую за хороший якісний контент))

[@ugochukwuumerie6378]

Wow! I'm thrilled by the explanation of these topics, it was simple and precise. I guess this is similar to what udemy is using to display content along side their Q/A (though it was react), if I'm wrong. I will definitely implement this on the project I'm working on. Thanks

[@daviddonadze221]

very nice. Never used it before. good to know. Thank you so much

[@Maryna768]

wow, this is awesome!

[@sailyjadhav1111]

Hey Dmytro! Amazing explainantion!! Thanks for introducing this to us. Also could you please additionally show us that drag of image functionality to this project?

[@dmitriykuznetsov4464]

Excellent job as always my friend! Helped a lot.

[@swapnasaritnayak2569]

That was awesome.

[@hitenchawda6443]

Best Video on Router Named Outlet!

[@williamxsp]

Very interesting. Never heard about It. Thanks!

[@milanasopava1956]

Great content. Please implement a drag and drop)

[@RAJU9622]

Excellent video, please do a video for drag and drop

[@stefanvettiger6308]

Can you make an example with lazy loading modules where outlet definitions are setup in the lazy loaded routing module. I can't figure out how it works! Seems not that easy...........

[@utsavsharma2979]

Can you please post few videos corresponding to the concepts of how Angular works behind the scene.

[@gund_ua]

Hey Dmytro, nice video about named routes! I remember using them and they were called auxiliary routes same time ago. Where they renamed to named routes? Also I used them to implement a drawer that was synchronized with the url which is nice when you want to be able to navigate back and forth in drawer with browser history.

[@DecodedFrontend]

Hey Alex! Yeah, I also remember it was named auxiliary routes but in docs, they are known as "named outlets" but I have no idea when and why it happened :) Anyway, thanks for the comment and the use-case you shared with us!

[@BiswajitPatra13]

@Decoded Frontend Is this solution better interms of SEO. Because I am not sure this kind of URL is not so friendly.

[@RCTUN748]

Hey there, thanks for sharing that. It was really useful and it makes the router-outlet function more flexible. However, I have a question. It seems that with this layout, the combination of URLs must inevitably be done in a "specified way" for it to work. If the project is designed for use by a specific system, it doesn't seem like a problem, but if the project has SEO requirements, I'm worried that this combination of URLs might not be very SEO-friendly. Is that the case, or am I just worrying too much?

[@lyricsaiart]

Beautifully done! Thanks for your series, it's really a great help in understanding angular)

[@romandubinin6089]

You're making very useful videos, Dmytro, thank you! I just have one idea for further themes - unit testing of components, especially with routerLinks, from first glance not a very trivial thing

[@denisgandzii1551]

Cool explanation. But I am sure there are some more complex use cases, will be nice to see them also. For example if we can have outlet with multiple children, or with lazy load modules. As well if is possible to have several named outlets. For example I have issue to define named outlets in app routing but html tag in a lazy load modules. I assume it is not possible but hope there is some option to do that. Thanks. I really love and appreciate your courses! Have a good time.

[@tristan2439]

Im currently learning Angular and in a project of mine i came across this specific Routing task. Its a chatapp where i also want to have multiple outlets on a desktop view (sidenav, main chat window, thread chat window). I figured to implement the routing the same way you showed in this video, but wondered how i would switch between different Routings in different screen resolutions. E.g. in the mobile view every components gets rendered in the same outlet because the should only be 1 component visible at a time, but on a desktop the routes should "fork" like you showed. I implemented a service to navigate between different urls, where the service checks the windowsize and either sets the "normal" url or the (outlet: {'url'}). My only problem here is the part with the restoreability. When im on the desktop view and having the (outlet: {'url'}) url and resizing the page at runtime into the mobile resolution, the url of course doesnt update so the mobile view cant get rendered because the routes array doesnt contain a route to the named outlet. Just on reloading the page with an empty route and navigate back to the chat works. Can you maybe help me with this issue?

[@fireflysemanticsmedia6267]

Brilliant!!

[@thangnd50]

I'm just getting into Angular. I feel like the community for Angular is not as large as that for ReactJS, so channels like this one of Mr. Dmytro should be much more recognised. Just subscribed 😄Hope to see more content from you. Well done!

[@maSterVqne]

damn i can't believe those outputs where under my nose for this long !!

[@Hmmmhmm-b3q]

ur video is impresive but i really hope u will have course that explain angular from very start to very end one day. but anyway, thanks for your skill sharing

[@ritsk4338]

Subscribed immediately

[@DecodedFrontend]

Well done :)

[@nishantt1231]

Do you have any tutorials on Angular? Would love to learn from you.

[@liaozhangpeng4436]

I thought it should be used when two router outlets watch same url and then do their job, those ( ) in url looks so wired

[@carlosiglesias8354]

I ♥️ your channel

[@MrVIPKent]

Дякую за відео, допомогло вирішити багато проблем при розробці

[@pointlesspos8440]

Hey, I would find it awesome if you showed what you were going to show at the beginning of the video. Then we go through the video with some kind of idea of what the intent is.

[@mumtazahmadUI]

Hi Thanks for introducing this to us. can u also tell me what the name of extension of visual studio code check for package size for Ex.: 110.4K (gzipped: 35K) plz what extn. name its also helpfull 110.4K (gzipped: 35K)

[@DecodedFrontend]

Hi! The extension is marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

[@ilnurryazhapov]

Super puper content))

[@Geek-Doom]

Hi bro, i like your videos, but i have a question, how do you do this with lazy loading routing?

[@asalm9900]

Thank you 🙏

[@mannu6464]

very useful 👍 , still thinking about its applications. can you name a few ?

[@channelnoraa]

Powerful!!!!!

[@mila4308]

Супер урок, классное объяснение, хороший пример 🔥

[@iroshanaravishan1388]

Wow... it works...🤩👏🙌

[@alison.aguiar]

🤩🤩🤩🤩🤩 thanks guy 👏👏👏👏👏👏

[@atifsaeedkhan9207]

Hi, I have done what you have mentioned in this video. When I deployed this to Azure it works fine but when I try to enter the url directly and press enter, page never loads. Application unable to find it. What is the solution of this please.

[@JoshDeveloper]

do you have Telegram channel ? :)

[@DecodedFrontend]

Hi, Josh! No, currently I don't have it but let's see, maybe in the future :)

[@JoshDeveloper]

@@DecodedFrontend awesome, just it would be good if you share little contents and posts there, you know in youtube it is not so convenient))) Good luck man, u r doing amazing job :)

[@radvilardian740]

yrah, we ask u in the comment, so why not 😁

[@bhavikchauhan5417]

KZbinr ' code with hary' looks like you

[@ДесткийСад-ц8г]

not working.

[@suyashjawale6953]

Code with harry lookalike

[@tomaspl1987]

It was very useful. I would like to know if there is some way to escape from the ../(detail:extra) suffix when you have another link in the DOM as it's mentioned in this bug: github.com/angular/angular/issues/15338 or if it's something that wasn't already be fixed. Thanks!