NgDoBootstrap in Angular - Lifecycle Hook You Probably Didn't Know
ฝัง
- เผยแพร่เมื่อ 12 มิ.ย. 2024
- NgDoBootstrap is a lifecycle hook in Angular that allows you to customize the bootstrapping logic of your Angular Application. It is executed if no component is provided in the bootstrap array in the AppModule and delegates the bootstrap logic to you. In this video, we will come to this feature by investigating the source code starting from the main.ts file in Angular, diving into the source code, and seeing this lifecycle hook in action. I hope you will learn something new today! Enjoy watching :)
💥 Angular courses made by Dmytro - bit.ly/df-courses 💥
✂️ Use coupon TH-cam_DISCOUNT to get a 10%-off discount ✂️
🕒 Time Codes:
00:00:00 - Intro;
00:00:32 - The feature are we gonna implement?
00:03:35 - Internals of bootstrapping process;
00:05:39 - Bootstrapping Multiple Root Components;
00:07:20 - Continue to investigate the Source Code;
00:08:17 - ngDoBootstrap Hook in Action;
00:15:22 - Outro;
🔗 Source code on GitHub (init state on the master branch):
github.com/DMezhenskyi/angula...
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi
#angular #angular14 #angularadvanced #ng - แนวปฏิบัติและการใช้ชีวิต
Subscribe also to my other Social Media where I publish short Frontend Tips:
Twitter - twitter.com/DecodedFrontend
Instagram - instagram.com/decodedfrontend
LinkedIn - www.linkedin.com/in/dmezhenskyi
👍 🌟 💯
Hi Dmytro. Is it possible to create dynamic elements in component without actually creating component tag? The thing is I use component for creating different types of elements, but on this case I have extra wrapper all over the project)
I really like this approach, I think it is important to understand why things are happening before implementing something. Excellent video!!
Thanks for your valuable feedback and your thoughts, Fernando!
I love this way of teaching this kind of stuff, because you really understand what's going on under the hood so you can remember it more easily. But most of all you have all my appreciation for explaining things that don't even appear in the official Angular documentation.
No one teaching these high deeply Angular stuffs better than you. Thanks a lot!
I totally appreciate your approach to into the why instead of just handing out the solution.... so helpful, and rare that mentors spend this type of time in these videos
Thank you for this valuable feedback. I appreciate it so much!
I like when you show us source code. It's pretty useful and interesting.
Yeh, boy!
I love this way of teaching this kind of stuff, because you really understand what's going on
{{'it feel great why I see something like this content, it is not repeated and I have learn something new 👏👏👏'}}
This approach is fantastic... I will not need to memorise as the steps are logical... As always, you explained it well. You are the boss of Angular in TH-cam. Advanced and interesting content for free....!!!!!
This one is clearly the one that I missed. Thank you so much.
I really like the approach, it tells me what I'm implementing instead of implementing it blindly 👍
You post stuffs we can't find out figure out easily. Thanks a lot.
Also i would love to see how to run 2 different angular apps in single code as you've mentioned.
New approach is very good. Theres a lot of videos that explains how to bootstrap thing, but here I like approach that explains why its done this way. Its kind of deep knowledge explainded in simple way. Keep up good work.
Great approach 👍
Дякую Дмитро, бажаю успіхів і так тримати ❤️
super dope - one of the best Angular channel by far. This is simply amazing and you make it look too easy lol 😇
wow!!! each video is new huge lesson about development, i really appreciate your videos. about the explanation: please do it always.
Awesome explanation.
Please make a video to bootstrap the applications as separate as well.
Another great video. Yeah! we want to see how to bootstrap two angular applications separately running on the same page. Thank you!
Excellent work as always, I love your videos. I add a note about the last part of the video: you just provide a CSS selector as a second parameter to the bootstrap method. Thanks a lot!!!
This channel is by far the best channel i have found if you want to dig deeper into angular
Thanks mate! You do really good job, and in this video you described the feature that is not easy to know about from the official docs.
And it's worth to mention, that there is another option to bootstrap any root component without creation of some anchor node. For this we can make selectors of all potential root components all the same.
Great stuff.
These things took me years of R&D to find.
Keep at it. 😁
You are welcome:)
@@DecodedFrontend
We created a react project at the end. 🤣
I usually comment before watching the whole video.
Excellent video, would be nice if you could create a video regarding the Routes const that we usually create to set the routes, how embedded routes are shown how using lazy loading we can establish a specific component
Awesome, thanks a lot! Digging in the source code is the best approach.
Didn't know this was possible. good content as usual.
What an incredible content.. waiting for part 2, where you will have two or more root files completely isolated, but in the same application.. like the video there, don't be stingy
This was awesome.
great content as always :)
Nice video Dymtro!
great video! thanks
Great stuff. Thank you
Excellent video!
you are awesome....thanks
Thanks! It was very useful! )
Best angular content! Thanks
i like this type of videos
Best tutor🎉
wonderful video; many thanks
Absolutely loved this approach
Thanks for letting me know! It helps me to make content better for you 😊
Thanks friend for this video !!!
Wow. great video. Thank you!
That’s cool 👍 Please continue.
Great explanation 👌
Thank you!
I like this approach !!!
Nice, liked this approach
Thank you. I love how you break things down. 👏🏿👌🏿
thanks for your videos, pls do more angular advanced videos, with explanation from source
Super cool technique. Thanks!!!
This is amazing 🤩, thank you so much.
I really like your videos. Glad that I found you.
Wow that is good to know, Thank you.
you are the best, yes do the other video please!!
Awesome sir again.
I love this approach and I'd like to see more videos like this.
Great approach! Please proceed with it :)
Great thing. Thanks a lot for your lessons.
Excellent... easy... very consistent
Nice video. I really appreciated this approach!
Nice video and great explanation! Looking forward to seeing new videos related to this topic.
Great stuff!
You have very good skills to expressing your thoughts 👌
i like this approach
As always, great video. Thx Dmytro. I'm looking for the next one.
Glad you like it! Thanks for the feedback 😊
Good way of thinking process
I like this approach, very good content, as always
I like the approach you use! Great video! Thank you!
you are awesome.
great approch
Great thing! Thanks for bringing it to us! And yep, this approach is better, it always good to know how things work under the hood.
I've always liked your videos bc they're very detailed and well explained. Keep this source code first approach, it helped me a lot. Thanks!
Wow, that was fantastic, thank you)))
Glad you liked it! Thanks for your feedback 👍🏻
Excellent explanation, i like your didatic and learn alot with your videos.
This is the first time hearing of this
Thanks a lot for your videos
Like the new approach
Шикарное видео! Формат просто отличный - спасибо тебе большое!
As always very powerfull inputs, thankyou very much for all your videos are really something that I enjoy. I plan at the future to appear in angular google experts as you :)
Great video. Please add more videos about forms and Internationalization
Thanks!
Thank you so much for it ❤️🙏🏻
Damn man :). You reveal really crazy staff.
Wish I can employ some of this in the projects to come
Awesome
I really liked this way of explaining the concepts.Please do more videos in this way only☺️
Yes, It is a good way.
Superb please share more angular advance concepts 👍❤️
thanks
Very informative 👍 please go ahead with your approach of investigating of code...
I like your content alot thanks for your hard working
You are welcome :)
💙💛 Very useful and informative vidio 💙💛
Another great video thanks for sharing, yes it will be amazing if you can make a video about " bootsraping multiple app running on the same page "
PS : i really like your teaching approach, in our job it is highly important to UNDERSAND what is happening behind the scene rather just the solution
Hi, congralutions! it is very interesting and useful this way, continue with this type of video, please. could you have more video about angular material theme customization? thanks
very usefull content, currently i have one app like this, with a "pro" and "basic" versions, and i'm using other strategy to do the same thing, thank you for content!
We should create a page in the official docs with your videos, explaining what Angular really offers 😎.
Regarding the approach, it encreases engagement, so yeah, bring more of it 😀
Great video :) Maybe in one of the future videous you can explain something about module federation. Its quite a interesting and demanding theme
Yep, source code in the first place 👍
great video!
love the deep investigating!!
have a question,
How we can use the DoBootstrap in standalone component(without the appModule)?
Thanks
Wow! Thank you so much for support and your donation :) I think it is my first Super Thanks :D
@@DecodedFrontend this idea of invistigation code i great. Can't wait for more Angular under the hood videos
@@ptu15 thanks for letting me know! I will keep it in mind for sure👌🏻
Great Video! Is it possible to create a video about how libraries works? For example, to dive in depth how 'mat-button' change style of button or something in this way. That is for simple example. And also would be interesting something more complex - I know you have a lot of knowledge =)
Дякую за відос! Ще було б дуже круто якби було круте відео про zone.js.
Хм… так, це має бути цікаво) дякую за ідею👍🏻
@@DecodedFrontend дякую за відгук на відгук))
Thanks for the video, really appreciate your lessons. Whanted to ask a use case for this as we can do the same logic in the app.component which is root component and then decide what to load next using all angular features.
I like this approach when you dig deep but also come up with some use case. The official suppose to be generic, that's why I don't see good analogies there when explaining complex topics.
This video was really insightful.
Can you please show us how can we embed two different Angular application in a single screen?
Thanks in Advance. 😊
Hi Dmytro, thanks for the explanation! I find this approach way better, but I also understand that sometimes it can be too complicated and the other one is preferred instead. We trust your judgement : )
Thanks Diego! :) Yeah, that’s true, sometimes it might confuse more then help. I will be trying to keep the balance ;)
@@DecodedFrontend doing a great job so far 👍
Very cool approach! Thanks!
I'm interested in case when we do not have user authorised yet. And we should show some form to fill in and go the auth server (or page like google auth) and then render the app of basic or pro version. How would you solve this? I guess a page reload will be required then?