Тёмный
No video :(

Multiple Router Outlets in Angular using Named Outlets (2021) 

Decoded Frontend
Подписаться 51 тыс.
Просмотров 44 тыс.
50% 1

Опубликовано:

 

26 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 66   
@FredoCorleone
@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
@DecodedFrontend Год назад
It is a great idea! Thank you :)
@davicampos802
@davicampos802 3 года назад
I didn’t watch the video yet but I know it will be amazing. I am loving these videos about angular
@maSterVqne
@maSterVqne 3 года назад
you where not wrong !
@DecodedFrontend
@DecodedFrontend 3 года назад
Thanks, Davi! 😀
@radvilardian740
@radvilardian740 3 года назад
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.
@denisbielishev
@denisbielishev 3 года назад
Drag and drop would be really useful and cool
@yevhen3934
@yevhen3934 3 года назад
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 :)
@dewinchy
@dewinchy 3 месяца назад
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.
@khumozin
@khumozin 3 года назад
Nice explanation! Please do a drag and drop tutorial
@ugochukwuumerie6378
@ugochukwuumerie6378 3 года назад
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
@wilsonyeo4525
@wilsonyeo4525 2 года назад
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
@daviddonadze221
@daviddonadze221 2 года назад
very nice. Never used it before. good to know. Thank you so much
@jonadersonmoura6903
@jonadersonmoura6903 2 года назад
Your content is very good!!!
@sailyjadhav1111
@sailyjadhav1111 3 года назад
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?
@maSterVqne
@maSterVqne 3 года назад
damn i can't believe those outputs where under my nose for this long !!
@alex_chugaev
@alex_chugaev 3 года назад
Great content! please keep it coming 👍
@kenjz8413
@kenjz8413 Год назад
По акценту почув що ти слов'янин але глянув на канал і був приємно вражений, дякую за хороший якісний контент))
@niall5447
@niall5447 Год назад
Keep the videos coming, learning angular as I. These videos are a life saver
@MrVIPKent
@MrVIPKent Год назад
Дякую за відео, допомогло вирішити багато проблем при розробці
@stefanvettiger6308
@stefanvettiger6308 2 года назад
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...........
@williamxsp
@williamxsp 3 года назад
Very interesting. Never heard about It. Thanks!
@VijayYadav-jk7ne
@VijayYadav-jk7ne 2 года назад
Superb my dear.... It's a very informative video.
@Maryna768
@Maryna768 3 года назад
wow, this is awesome!
@thangnd50
@thangnd50 2 года назад
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!
@milanasopava1956
@milanasopava1956 3 года назад
Great content. Please implement a drag and drop)
@pointlesspos8440
@pointlesspos8440 3 года назад
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.
@RAJU9622
@RAJU9622 3 года назад
Excellent video, please do a video for drag and drop
@utsavsharma2979
@utsavsharma2979 2 года назад
Can you please post few videos corresponding to the concepts of how Angular works behind the scene.
@liaozhangpeng4436
@liaozhangpeng4436 3 года назад
I thought it should be used when two router outlets watch same url and then do their job, those ( ) in url looks so wired
@swapnasaritnayak2569
@swapnasaritnayak2569 3 года назад
That was awesome.
@tristan2439
@tristan2439 7 месяцев назад
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?
@BiswajitPatra13
@BiswajitPatra13 2 года назад
@Decoded Frontend Is this solution better interms of SEO. Because I am not sure this kind of URL is not so friendly.
@carlosiglesias8354
@carlosiglesias8354 2 года назад
I ♥️ your channel
@gund_ua
@gund_ua 3 года назад
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
@DecodedFrontend 3 года назад
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!
@hitenchawda6443
@hitenchawda6443 11 месяцев назад
Best Video on Router Named Outlet!
@dmitriykuznetsov4464
@dmitriykuznetsov4464 Год назад
Excellent job as always my friend! Helped a lot.
@romandubinin6089
@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
@lyricsaiart
@lyricsaiart 2 года назад
Beautifully done! Thanks for your series, it's really a great help in understanding angular)
@denisgandzii1551
@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.
@fireflysemanticsmedia6267
@fireflysemanticsmedia6267 Год назад
Brilliant!!
@asalm9900
@asalm9900 Год назад
Thank you 🙏
@RCTUN748
@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?
@ritsk4338
@ritsk4338 2 года назад
Subscribed immediately
@DecodedFrontend
@DecodedFrontend 2 года назад
Well done :)
@channelnoraa
@channelnoraa Год назад
Powerful!!!!!
@ilnurryazhapov
@ilnurryazhapov 2 года назад
Super puper content))
@mila4308
@mila4308 Год назад
Супер урок, классное объяснение, хороший пример 🔥
@mumtazahmadUI
@mumtazahmadUI 2 года назад
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
@DecodedFrontend 2 года назад
Hi! The extension is marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
@radvilardian740
@radvilardian740 3 года назад
yrah, we ask u in the comment, so why not 😁
@atifsaeedkhan9207
@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.
@nishantt1231
@nishantt1231 Год назад
Do you have any tutorials on Angular? Would love to learn from you.
@JoshDeveloper
@JoshDeveloper 2 года назад
do you have Telegram channel ? :)
@DecodedFrontend
@DecodedFrontend 2 года назад
Hi, Josh! No, currently I don't have it but let's see, maybe in the future :)
@JoshDeveloper
@JoshDeveloper 2 года назад
@@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 :)
@mannu6464
@mannu6464 Год назад
very useful 👍 , still thinking about its applications. can you name a few ?
@iroshanaravishan1388
@iroshanaravishan1388 2 года назад
Wow... it works...🤩👏🙌
@Geek-Doom
@Geek-Doom 2 года назад
Hi bro, i like your videos, but i have a question, how do you do this with lazy loading routing?
@alison.aguiar
@alison.aguiar 3 года назад
🤩🤩🤩🤩🤩 thanks guy 👏👏👏👏👏👏
@bhavikchauhan5417
@bhavikchauhan5417 2 года назад
RU-vidr ' code with hary' looks like you
@user-sl3hh9mz9f
@user-sl3hh9mz9f Год назад
not working.
@suyashjawale6953
@suyashjawale6953 Год назад
Code with harry lookalike
@tomaspl1987
@tomaspl1987 3 года назад
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!
Далее
These Coding Projects Give You An Unfair Advantage
14:39
microsoft doubles down on recording your screen
10:00
CanMatch Guard in Angular 14.1 Router (2022)
17:49
Просмотров 14 тыс.
What’s new in Angular v18
20:08
Просмотров 118 тыс.
Component-Less and Empty-Path Routes in Angular (2023)
14:07