Advanced #Angular Patterns - ForRoot & ForChild (2021, Decoded)

In this video #tutorial we will have a look at an advanced angular design pattern - forRoot() / forChild(). We will see what kind of problems it used to solve many years ago and how we can use it today in order to configure Angular modules. Besides this we will have a look at source code of Angular and check how Angular team used this pattern for RouterModule. I hope you will find something interesting from this video and I am looking forward for your feedback. Enjoy watching!

📣 Become a Pro in Angular Material Theming (Advanced Workshop) 📣
✅ Use 10%-off coupon code: YOUTUBE_DISCOUNT (Only 2 coupons left)

📣 Blazing fast GraphQL Backend just in 1 Day with Hasura Engine 📣
✅ 20%-off coupon code: HASURA-EASY-START

📣 Course for beginners 📣

Time Codes:
00:00:00 - Intro;
00:01:18 - Demo project overview;
00:03:55 - Implement a feature which describes the problem;
00:11:14 - Demonstration of multi-service bug for lazy modules;
00:13:17 - Solving the issue using forRoot() pattern;
00:18:02 - Using forChild() pattern to configure lazy modules;
00:28:31 - forRoot()/forChild() pattern in Angular source code;
00:31:28 - Outro.

🔗 Everything about Angular Dependency Injection in this playlist:

🔗 Link to the source code on GitHub:

#webdevelopment #frontend #angularpatterns

[DecodedFrontend]

Use Timecodes in video description and leave your feedback 🙏🏻
UPD: *I just realised that I made mistake* . I told that when you import module calling forRoot() Angular imports only services *WITHOUT declarations* - this is *NOT TRUE, * declaration are be ing imported as well. If you do not want to import declarations you can create another NgModule without declarations and return it from static method. Thanks *Alex Malkevich* for correcting me.

[farfazzi]

i didnt see this pattern explained so well anywhere else, you are doing outstanding work you should have way more subscribers and popularity

[gund_ua]

Hey Dmytro, very nice video with clear examples!
I actually do use this patter quite a lot in the libraries for configuration purposes like withConfig etc. So it's quite useful.
One thing to note - when you import a module using a static method you are still getting all of it's exported stuff like components, directives, etc in the same way as you would get during normal import. It's just something to be aware of.
If for some reason you do not want to export those things in static methods you can create another NgModule and return it from the static method but in most cases it's actually a desired effect to have all exports available anyway 😀

[jerryvux]

Again, can't stress this enough but your videos bested all the paid ones available out there. Thank you so much for providing us quality content for free

[JohnRin]

Incredible tutorial! After reading many blogs about it, only you made it clear for me. Thank you!!

[AnuradhaMudalige]

This is great Dmytro, you deserve more views!! Clear explanations. You have cleared most of the problems I've had so far.

[iulianradulescu]

You understood the problem at a deeper level because you struggled with it yourself ! That's why you know exactly where the pain was :) . Excellent explanation man ! Better than the docs !

[antongrekov]

Great video, thx a lot, friend. Helped me fully understand forRoot/forChild methods on module class. Only one mistake i found is that you saying: "forRoot will not return module's declarations/exports but only providers". This is wrong. It actually will also connect modules declaration components/pipes/directives as weel as what module exports. forRoot helps us decouple providers and connect them at root level. It also connects declarations/exports of a module. But when you call w/o forRoot it excludes providers, this is how it all works

[sanjaygarg]

shareReplay operator basically turns the unicast observable to multicast which means all subscribers will share the same execution, great example to explain this pattern!

[radvilardian]

You said to leave comment, so I say This so freaking useful tutorial, please keep going...👍👍

[prabuk]

We really really needed this... Thank you...

[SouravDuttaROCKSTAR]

Every video is a masterpiece .. somehow never knew about these features before .. very clear videos, loving the series .. keep them coming .. 🙌👍🏼 😎🎉

[maximermoshin]

Thank you for the video. Really helpful. Now this pattern is more understandable than before)

[SYMAM]

Just discovered your channel, really great content. I am watching lots of your videos. What I noticed is that you don't have a lot of views compared to other dev channels, and to be honest you deserve way more views given the quality of the content you provide. Personally I think you are missing on the views because your videos are too long, I think it would be better if you divide your videos to a series of short videos (8 min maximum). Personally I am following other dev channels and noticed that the difference is manly in the videos duration. Keep up the hard work man and all the best of luck.

[nanasarathi]

Very well explained 👍 one thing to notice is, when you configured lazy module interval using forChild() then again new instance of service got created which resulted in resetting of interval...

[haroldpepete]

that's advanced concept and you explain as gods, thank you

[ammireddy]

Excellent, You deserve 100× more subscribers ❤️👍

[nguyenhoa]

Awesome Advanced Angular course! How easy those definitions can be understand. Thank you so much, it's over my expectation! 🔥🔥

[ganesh]

You explained it very well..got all clearty now.. Thank you 🙏

[eugenetcgcomputer-guy]

I really love your videos, you do explain more complex stuff in a more easier way than it should be. Being a fullstack who love backend than frontend, your videos are very enlightening and by far made me enjoy Angular more than i do of ReactJs, i must confess. Great content