Advanced

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) 📣
bit.ly/angular-material-themi...
✅ Use 10%-off coupon code: KZbin_DISCOUNT (Only 2 coupons left)
📣 Blazing fast GraphQL Backend just in 1 Day with Hasura Engine 📣
bit.ly/complete-hasura-course
✅ 20%-off coupon code: HASURA-EASY-START
📣 Course for beginners 📣
bit.ly/angular-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:
• Dependency Injection i...
🔗 Link to the source code on GitHub:
github.com/DMezhenskyi/angula...
#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.

[@giorgimerabishvili8194]

Definitely the best channel!

[@abenjamin13]

I second this comment 👍

[@sanjaygarg3540]

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

[@farfazzi]

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

[@AnuradhaMudalige]

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

[@JohnRin]

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

[@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

[@eugenetcgcomputer-guy6103]

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

[@antongrekov1879]

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

[@DecodedFrontend]

Hi Anton! Yes you are right, I was pointed out to that my mistake some time after video publication and I should have the attached comment regarding that… (I will check it one more time). Nevertheless, thank you that you watch my videos carefully and also for correcting me! 🙏🏻

[@miroslavkovac8888]

Thanks man, i was wandering about this one, why not just import the module at the root and declare the service in the root module's providers? I guess this saves a bit of code, so that the clients don't need to 'provide' each service manually.

[@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 😀

[@DecodedFrontend]

Hi Alex! Hm.. Yeah, you are right I just checked and indeed declarations are being imported by calling a static method... For whatever reasons I was always so sure that it behaves as I said that I had never actually checked it :D Thanks for correcting me!

[@ariMuayad]

It's just great, please don't stop posting.

[@sPanKyZzZ1]

Awesome, thank you for the info!

[@nguyenhoa7759]

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

[@DecodedFrontend]

Glad you liked it and thank you for your feedback 😊

[@mktrann]

Thank you so much for your amazing explanation!

[@paimfp]

Great explanation, thanks!

[@user-gv5nm]

отличный пример , чтобы раз и на всегда понять разницу между этими методами. . спасибо.

[@aminerhouma]

Very good example, thanks.

[@stepandemchenko9870]

Thanks, really helpful!

[@the_simple_dude1650]

Thank you very much for the clear explanation.

[@MatiasAlibertti]

Great video, thanks!

[@prabuk3819]

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

[@DecodedFrontend]

Thanks! I am glad it was helpful 😊

[@shivanigaddagimath6105]

Hi Prabhu! Are you looking out for job opportunities in web development currently? We are a web dev company and looking to hire. please let me know if interested.

[@_cipriangg_]

You have such an awesome channel!

[@SouravDuttaROCKSTAR]

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

[@DecodedFrontend]

Thank you for feedback! 😉

[@haroldpepete]

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

[@TheGothicSecret]

Thank you!!! Very good video

[@radvilardian740]

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

[@DecodedFrontend]

Thanks a lot 😉

[@SaurabhGangamwar]

Best content related to angular

[@iulianradulescu7057]

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 !

[@vovanhung9406]

actually, he needs to read a docs to explain to us. LOL

[@urielrodriguezusma]

Excellent class. Thank you

[@abhisheksitar]

What an awesome tutorial! Thank you!

[@shivanigaddagimath6105]

HI Abhishek! Are you looking out for job opportunities in web development currently? We are a web dev company and looking to hire. please let me know if interested.

[@fireflysemanticsmedia6267]

Awesome demo and explanation!!

[@maximermoshin393]

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

[@DecodedFrontend]

Thank you! Great to hear it 😊

[@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...

[@abdouafailal4869]

Thanks, you are the best!

[@ptu15]

love this channel

[@jojojawjaw]

The best channel on Angular!

[@DecodedFrontend]

Thank you :) it will be even better 😉

[@drone-plus-plus]

Excellent presentation of the material, thanks. I would like even more videos in the style of ideas for where and how patterns can be used in the context of an angular (Bridge pattern) =)

[@drone-plus-plus]

Following your example, I have already found two use cases. I'll tell you about the second one, I used this approach for searching with a list, where the search component (in which there is only an input for a typing) works through an abstraction with a list.

[@ganesh56789]

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

[@DecodedFrontend]

You are welcome :)

[@ali-chavoshi]

very good my friend.very awsome ❤️

[@johnadaikalasamy]

Great video, Thanks

[@ann_bubochka]

as I understood, these functions allow you to import module A into any number of other modules using one instance of providers of A module for all application🎉 Thanks for your videos ❤

[@DavidSoles]

Very well explained. Thanks.

[@DecodedFrontend]

Thank you!

[@zellkon]

Thanks for this TUT

[@ammireddy484]

Excellent, You deserve 100× more subscribers ❤️👍

[@DecodedFrontend]

It will be great if one day it comes true 😄 thank you!

[@alvinyanson]

Everything in this video is well explained. The only thing which is wrong is the closed captions for MODULES which read as MODELS.😁 Anyways thank you for this Dmytro.

[@Doktornikita]

Nice! I like you video!

[@SYMAM116]

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.

[@DecodedFrontend]

Hi! Thanks for such a great feedback :) It is hard to say because KZbin algorithm constantly changes but my "experiments" show that longer videos preferable because user retention is higher and KZbin likes it. Also I noticed that most of my viewers prefer longer videos where everything is explained in details rather than briefly go through the topic like Fireship channel does as example. Or maybe it is just because my channel is too young, it is just 1 year old :)

[@arpittripathi8089]

I agree with you on views but these topics are quite core ones which do require some extra amount of time to explain.

[@beodan9219]

cool explain

[@Sinan997]

Great video! but i want to mention that in first part, if you import PollingModule in only AppModule, lazy loaded module and eagerly loaded module will get the same instance of PollingService. so app component and lazy component was going to use same count

[@user-om4hp7me3d]

Damn, so cool !

[@DecodedFrontend]

🔥🔥🔥Do you want to master *Angular Material Themes* like a PRO? Check out my new Workshop where you will find a lot of advanced tips & tricks which will help you to make your themes maintainable, lean & consistent! Limited 50%-off discount is about to expire very soon: 🔗 bit.ly/angular-material-theming-workshop 🔥🔥🔥

[@SaurabhGangamwar]

awesome

[@fawadmukhtar2234]

Great

[@georgiekriparoy]

Why after using the withConfig() method, the Lazy loaded module timer starts from zero instead of continuing the timer from where the home module left it. So doesn't this mean it is not a singleton instance of the polling service which was the whole idea of using this approach

[@shivanigaddagimath6105]

Hi Georgie! Are you looking out for job opportunities in web development currently? We are a web dev company and looking to hire. please let me know if interested.

[@bancamilleri1546]

Hey, love you videos. I think you forgot to list which course you started off with though. Is it the Maximilian maybe? Thanks.

[@DecodedFrontend]

Ah... indeed! Yes, it is a course from Maximilian :) this one bit.ly/angular-for-beginners

[@mtvspec]

Nice series. What software and hardware you use to streaming?

[@DecodedFrontend]

Hi! Thank you:) I use iMac 5k and Camtasia 2020 to record and edit my tutorials and courses

[@seanbruceful]

Hi, Learning Angular for 1 month. I like your videos and it's help me a lot. One question I have when watching is that when to use @Inject declorator and when to use just constructor injection ? It's pretty confused to me.

[@volodyapanosyan5961]

I noticed that In 26:10 when clicked in " Load Lazy " button, this Pollingservice ceases to be singleton.

[@DecodedFrontend]

Hi Volodya, In scope of entire application- yes, because lazyloaded module will use its own instance of the service but with a different configuration of INTERVAL token.

[@volodyapanosyan5961]

​@@DecodedFrontendThanks for response. You are made me great favor

[@user-kx8wp1fy6l]

Is this information up to date? Because since Angular 6 you don't have to use forChild to create a singleton service. It's enough to declare your service with providedIn: root in decorator and you will have the same service instance in your main module and in your lazily loaded module

[@p.s29]

Thanks for uploading it.. I learn a lot from you. :)

[@DecodedFrontend]

My pleasure!

[@shivanigaddagimath6105]

HI Prateek! Are you looking out for job opportunities in web development currently? We are a web dev company and looking to hire. please let me know if interested.

[@p.s29]

Hi Shivani, Thank you for reaching out to me but I'm not looking for job right now. P.S. kudos to the efforts you're putting in for recruiting people. 🙂

[@shivanigaddagimath6105]

@@p.s29 Thank you for your response Prateek! Are you not looking out because you are already working? We are especially interested in hiring people with work experience. So if you have around 2 years of work experience and want to work on interesting projects and grow as a developer please consider the opportunity. If thats not you, then if you know someone like that, please refer them to me. Thank you.

[@p.s29]

I recently accepted an offer from a company that's why I'm not looking for job change and as for reference I'm sorry I don't have any.

[@bidfca5980]

Nice vídeo

[@MoMoadeli]

Thanks!

[@DecodedFrontend]

Thank you soo much for your support!

[@MoMoadeli]

@@DecodedFrontend BTW, @06.08 you mention shareReplay subscribers only get the emissions from the moment of subscription. Actually, with no count argument passed, shareReplay subscribers get ALL previous emissions. shareReplay(0) will do what you mention.

[@sampsonorson]

Thanks for the great content. Please, I noticed that if the HomeModule isn't imported into the AppModule and it still works. The only connection I can make between the HomeModule and the AppModule is the routes and references the HomeCompoment. Please, why does this work?

[@sarthaktuteja3866]

Can you please create a course on advanced angular topics? Very well explained btw!!

[@DecodedFrontend]

I can and think about that. I would appreciate which topics would you like to see there :)

[@sarthaktuteja3866]

All topics which make someone an expert angular developer from an intermediate developer. Some topics you can include maybe change detection, decorators, view encapsulation to name a few..

[@pranrv4983]

Can you please make a video about getters and setters in Angular and its use cases?

[@DecodedFrontend]

I'll take it into consideration :)

[@issam9077]

0 dislike , i hope Ben Awad not seeing this video XD

[@DecodedFrontend]

I don’t think he watches such small channels like my :) and he’s about React only (if I remember right)

[@issam9077]

​@@DecodedFrontend your channel is one of the best and ur videos content are so important , showing ur mistakes in video need a lot of self confident and help other developers not fall in the same mistake that s why ur channel is gold .. and for Ben he just a spoiled react brat XD ,

[@alex_chugaev]

Once React will have a built-in hook "useAngular()". Then Ben will change his opinion.

[@DecodedFrontend]

Haha! True 😂

[@pedrofernandes2005]

Another great video as usual. Unrelated question: is it really necessary for libs to use the ng build? Why not just put the tsconfig point to the folder of the lib? What practical difference does it make between both ways? If you have multiple libs it can get pretty complicated that way.

[@DecodedFrontend]

yes, you are right! You can use also paths mapping in tsconfig as aliases to your libs and it would be even better way. Sometimes during recording you just do not think about all aspects especially if it doesn't directly relate to the topic. Sorry for confusion :)

[@pedrofernandes2005]

@@DecodedFrontend hey thanks for the answer. it was actually an ongoing discussion on our project and I had this doubt on the back of my mind! :)

[@joshholmes6366]

@@DecodedFrontend It would be great if you could do a video regarding ng libraries and the different ways to link them to your project for testing.

[@jonatabiondiJsLover]

Top

[@adriansie542]

Almost a month and you still don't have dislikes. So... let me... be first! huehue Kidding, very good explanation

[@DecodedFrontend]

Haha :D thanks! Yeah.. I am also surprised how long it stays with 0 dislikes. Haters have somehow fucked up 😄

[@abhiagarwal96]

Once you started using forChild, the timer was not shared? or is something I'm missing?

[@collinsk8754]

💯💯👏👏

[@Vietnamcamping89]

Hey what is the component to show gzip size in your app ?

[@DecodedFrontend]

It is a vs code plugin marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

[@gimpinator]

I really like your videos, nice work. But one thing, please dont say 'Model' when you mean 'Module'. Otherwise keep the good videos going :-)

[@DecodedFrontend]

Sorry for that but I will try my best :)

[@SaschaKleiber]

I am not sure if I understood it right. :-( I am trying to extract some angular-components from my main-client-application into its own angular-library to use it for multiple client-applications. Problem is, some of the components as well as services in the newly created lib need some configuration from my main-application in form of a json-object which contains some client-specific information, mainly strings, paths etc.. Until now I could just import the file containing these constants.... Can I achieve that with forRoot as well? I am really struggling with that, as even the angular-course you mentioned on udemy (which I also bought) doesn't cover "configurable modules" (at least I didn't notice it). I just need to pass a config-object into the module... Another connected issue: How do I pass an array into my Library-Module for another "forRoot"-Function inside of it? Meaning: My Library-Module also imports a Module (ngx-translate) which needs to be configured via forRoot. So now I need to pass this information into my Library-Module and then into its imported Module. What I also dont understand in your example: You are using the same PollingService inside both the lib and the Angular-App which uses this lib?

[@digitech1241]

Thank you for the awesome video. I have one question, How can I pass config (CustomConfig) from PQRModule to ABCModule.forRoot(config) @NgModule({ imports: [ ABCModule.forRoot(config), ], }) export class PQRModule { static forRoot(config: CustomConfig): ModuleWithProviders { return { ngModule: PQRModule, }; } } OR, Is there any other way to do it? I am trying to extend ABCModule with my own customization. Thank you.

[@user-wr8gg9kh6l]

is that possible to share service as a singleton using forRoot, forChild technic? in your example when you added forChild static method - the counter starts counting from 0. Thank you

[@DecodedFrontend]

Hi Max! This is exactly why the forRoot pattern was usually used. Inside the forRoot method you should define providers that supposed to be singleton in the whole application and these providers should not be provided anywhere else. Respectively, Module.forRoot() should be used in app.module.ts . Services that supposed to have a separate instance for every lazy module should be provided in forChild and Module.forChild() should be used in lazy modules only.

[@user-wr8gg9kh6l]

​@@DecodedFrontend okay, let me try to explain in your example, we had a few modules, one was lazy and used a polling service, and as you stated in the example on some pages I don't need to do polling too often and we want to configure polling interval for this particular module (service). When we are using forChild it creates a new instance of this service for this specific module, I'm not sure we need it. So my question was - can we use the same singleton service, and somehow configure it, for example, to do poll rarely. Result should be like: 1(1000)2(1000)3(1000) [navigation-to-lazy-module] 4(3000)5(3000)6(3000) [navigation-to-home-page] 7(1000)8(1000) etc 1,2,3,4,5,6 - value from timer, numbers in the brackets is interval

[@gopitech4773]

Hi sir please give your input's I am using EventManager from @angular/platform-browser. In this addGlobalEventListener method does not override default browser shortcuts. Please give suggestion for keyboard shortcuts and it's should override browser shortcuts in angular

[@DecodedFrontend]

Hi, Please ask such questions on websites like Stackoverflow providing code examples or interactive playgrounds like Stackblitz

[@alexandrekfoury9289]

So i f I understand correctly forroot is no longer nested, we can use injectable.

[@gkarapeev]

Instead of providing the custom injection token, couldn’t we just type the @ContentChild with the Widget? And have Widget be a base class instead of interface, and have WeatherWidget & SprintWidget extend it. What advantages/disadvantages does this have compared to your approach with a custom injectiontoken?

[@DecodedFrontend]

There are no to much differences between those 2 approaches. If derived classes share some functionality, it would be even better to use a base class as you described, so it can share common functionality. I think if I recorded video today I would use the approach with a class :)

[@gkarapeev]

@@DecodedFrontend I see, just double-checking, as I'm not sure myself. Thanks for the quick reply and the great videos!

[@khemiriridha6443]

you well explained forRoot but forChild is not clear

[@metalloid6624]

@29:37 forFoot() haha

[@baoguibai1912]

@Decoded Frontend kzbin.info/www/bejne/hobCqaN-rb-eqKc I saw you navigated to Angular Router source code (router_module.ts) directly in VS Code, can you show us how you did it? in my node_modules folder, it is router.d.ts, are you using some extensions or you are using older version of Angular? Thanks

[@DecodedFrontend]

Hi! No, I just cloned angular source code to my computer and switched in VS Code to that repo :)

[@mailmeakshaykapoor]

Is i am the only one hearing module as model ?

[@shivanigaddagimath6105]

HI Akshay! Are you looking our for job opportunities in web development currently? We are a web development company and looking to hire. Please let me know if interested.