Angular Dependency Injection in Depth - Resolution modifiers (2021)

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

[@4444-c4s]

You are not a really great Angular Developer but also a mind blowing Teacher. I can listen to your videos without getting bored for 2 hours

[@giorgimerabishvili8194]

Damn man, you just have one of the best channels about Angular!

[@DecodedFrontend]

Thanks so much 😊

[@NguyenHung-ye3cb]

Your Angular channel is seriously impressive, it's like a goldmine of expertise!

[@rembautimes8808]

It’s an amazing channel with great content. Brings out the powerful features of Angular. Thanks Dmytro

[@MetaBlueAvatar]

The Angular documentation makes it really difficult to grasp these concepts. Kudos to you for making such a simple explanation video on this. The demo with the theory helps a lot! Keep up the good work

[@DecodedFrontend]

Glad it was helpful!

[@osah712]

I still have a hard time grasping it even with a video.

[@emjaytripleo]

Coming from the Java world, I thought I had DI in lock until I worked in Angular, thanks for clarifying a lot of things, you deserve more subscribers.

[@DecodedFrontend]

Thank you! Hopefully subscribers counter will be fixed soon ;)

[@jakubrakowski3429]

Finally I got pure essence... thank u so much for ur effort. Waiting for other interesting topics, cheers!

[@DecodedFrontend]

Hi Guys! Thank you for watching my videos. Please use time codes in the video description and use saved time to leave your comments for this video 😉 It would be interesting to know for which real use-cases would you use this resolution modifiers 🙂

[@harsh55]

Not even a paid content is so clear and deep I'm glad I found your channel. love from India

[@DecodedFrontend]

Thanks, Harsh :)

[@vivmaniaa]

You are making the developers to stand out. Great job man. Love your content.

[@DecodedFrontend]

Thank you for your feedback! Happy to hear that 😊

[@robrabbit8288]

Thank you for creating in depth details about angular! I really appreciate it! Keep going! :D

[@DecodedFrontend]

Thanks, Rob! I am glad to hear such a warm feedback!😉

[@elisaschnabel1811]

All of your videos I watched so far were super easy to understand. A heavy topic easy explained.

[@DecodedFrontend]

Glad it was helpful! Thank you for your feedback, Elisa :)

[@ariMuayad]

Thank you so much. This is one of the few channel that divides into deep concepts and still maintains comprehension.

[@RRCaddick]

Really enjoy your content! Makes this topic very easy to understand. Is it possible to make a video where you can explain practical real world examples of when these would apply?

[@TheGeekWing]

This is really good. I'm very confused, reading the angular website but your explanation makes it really clear.

[@bennyt1635]

Excellent 👌🏼

[@DecodedFrontend]

Thank you! I appreciate it :)

[@caiosotans]

Thank you very much!

[@tarassavchenko2317]

And .. Opana:D I won't write how amazing your lessons are under each video, but I mean it

[@shivanimehrotra187]

Very smooth and you made it fairly easy to understand. I love your work. Make more content :)

[@DecodedFrontend]

Thanks a lot :)

[@fawadmukhtar2234]

You explained very nicely. thank you

[@puriajahanbani6636]

What you teach us is absolutely pure gold!

[@rohitkumar-sl6vn]

Awesome content. Easy to understand the content

[@mashab9129]

Every video from Dmytro is a gem, I found myself liking the video after first few seconds, after watching it till the end I want to put a 2nd like. 👏

[@DecodedFrontend]

Thank you, Masha! I am glad that the video was useful to you 😊

[@SuperLadly]

Good explaination. Precise .

[@yasirhussain9869]

Thank you for wishing me a productive week.

[@sabbasi]

Again, very simple tutorial. Thanks, by the way you made it so clear to understand if it was the goal

[@DecodedFrontend]

Happy to hear it! Thank you, Sajad 😉

[@ttbooster]

I got the three first, self, skipself and optional but I'm not sure I understood host.. I tried to relate to an actual use case where those bindings would make better code and can definitely see the advantage of the isolated provider in a component with self but also that you can use the same service globally with skip self

[@abhisheksitar]

Amazing video. Such a clear explanation. Please continue doing this.

[@DecodedFrontend]

Thanks, will do!

[@lucaspham5238]

High quality contents, subscribed. Keep it up bro.

[@Nice-coder]

it was completely clear what you explained about Resolution modifiers. But I am curious about the cases that we need to use these modifiers, what are their advantages? do you have any real applications and examples that you were forced to use them?

[@headscreww]

From Sri Lanka, Thanks from ANGULAR SRI LANKA

[@DecodedFrontend]

Hello Sri Lanka!😊 Thank you for feedback!

[@sweetsamikshya]

Thank you so much Dmytro, I really love learning from your videos. Please keep up the work and yes you are one of the few who made it learning angular fun and easy

[@singhkumardev]

Thank you for providing a piece of very useful knowledge. You are one of the best Instructor :)

[@DecodedFrontend]

Thanks a lot !

[@panchcw]

Very informative. This is the kind of videos that I desperately looking for so I can get a very good idea about how a framework is made.

[@nanasarathi]

Well explained 👍 Thanks for creating this video 🙏

[@DecodedFrontend]

You are welcome 🤗 glad you liked it

[@TehreemAkhtar-b4z]

Amazing Explanation man. So much clarity.

[@fnujensonsamuel4361]

I believe if u had mentioned DI bubbling, it would be have increased the awesomeness of this video. Afterall, "There is no charge for awesomeness and attractiveness".

[@DecodedFrontend]

Hi, thanks! :) Actually I mentioned about it but in another video kzbin.info/www/bejne/fWndiaidmL6XbdE :)

[@jojojawjaw]

Great course, thank you so much!

[@DecodedFrontend]

You are welcome! :)

[@misza1597]

Great explanation! keep it up! :D

[@DecodedFrontend]

Thanks! 😃

[@amrmohamed2608]

Amazing explanation! will you please tell me some use cases of such decorators and why would we use them?

[@maciejkamela5292]

Thank you, really nice and clean explanation.

[@DecodedFrontend]

Thanks a lot for the feedback 😊

[@gyulabarakso5991]

Logging prefix in the component constuctors at @Self decoratoes doesnt proof it is a different instance, becouse first time its log the initial value after you overwrite it and log the overwrited value. Way to proof : overwrite it in the app component and log the initial value at the component. Keep up the good work !

[@pashabiceps95]

Exactly. But i think the only way to prove is to use “useValue” or other property that overrides it in the providers array

[@zakizaz1]

Amazing work .. Thank you

[@mohamedmubarak8110]

What is the extension or tool that helps for cli recommendations? 2:40

[@abhavluthra578]

At 13:35 shouldn't it just give null rather than null error as we have added Optional modifier in parent scope?

[@zrowork198]

great stuff! thank you

[@DecodedFrontend]

Thank you, Aleksander! It is great to hear it 😊

[@user-iq334]

Great content, thanks. Learning a lot.

[@frontend3409]

Time codes is great idea. Your clips are what was missing on KZbin. Currently, i'm switching jobs, have a lot of experiences, but i'm lacking of knowledge and your movies are what i need right now. Your tutorials are better than (poor IMO, it's one of disadvantages of Angular IMHO) documentation. To @Host() - by `host element` i understand the view of the app-root (so these two divs with 2 directive), right?

[@akashwasson4220]

bro, you are pro! Thanks a lot!

[@andreykositskiy649]

thx for your work 🤗

[@kasomafredrick2223]

Oh great tutorial. I would use some of these techniques ie @self if i detect the key of my provider is likely to conflict with third party provider keys

Very good explanation! The skipSelf works perfect for not saturate memory on main chunk, for example registering icons in memory -> 100 icons in a child service and few in the parent. Do you know if is possible to unload services from memory?

[@HarveyDaclan]

Thanks, very well explained. Does the resolution modifiers work as well with services that injects another service? How does angular resolve services if modules are lazy loaded?

[@VipinRawat_Offcial]

Nice explanation 👌👌

[@dmitriy5906]

Nice! Please continue

[@DecodedFrontend]

Thanks! I will 😉

[@jonatabiondiJsLover]

great! i question: in your sample with SkipSelf since we are in app.component where angular wich is parent injector? the root injector?

[@vladimirlebedev00010]

Hello! Thank you so much for this video and for your channel at all. It will be nice though if you show or describe some use cases for each modifier because it is not clear why we should use it at all :)

[@mohininarwade9686]

Can you please make a detail video on Subjects and its types? Thanks!

[@mohininarwade9686]

Also if you could make a video on Lazy loading with route guards please?

[@MrNigam1992]

@Decoded Frontend, since we are using the @Self annotation that's why it's creating two different instances of the log service or we injected it in the component level that's why it's creating the two instances.. can you point this?

[@DecodedFrontend]

Hi! It is because you provide service also for the component injector. @Self resolution Modifier doesn’t create anything, it just controls how to resolve dependencies

[@AsemDreibati]

Thank you very much for this awesome tutorial ! In about @Host() section after we've removed providers from the parent directive what if we put viewProviders:[LoggerService] in AppComponent @Component decorator, Could this fix the issue since @Host() instructs angular to stop searching in the view of the host element ?

[@DecodedFrontend]

Hi Asem, Yes, for the Host() resolution modifier the viewProviders is the last place where angular looks for provider before to fail.

[@sefatanam]

awesome man !

[@aayushbhankale3594]

Great material Man , just want to know which VS code extensions do you use , atleast for Angular.

[@DecodedFrontend]

Hi! Thanks :) I use Angular Language Service and NX console extentions

[@valikonen]

It is good for performance to use @Host()? ...to reduce the search in tree for dependencies.

[@DecodedFrontend]

Hi, I don’t think so.. I mean yes, technically with Host() resolving will take less time because Angular won’t need to traverse a whole Injector tree but in fact it changes the logic of how Angular resolves decencies. So it is not a way of optimization. Angular uses highly optimized algorithms and highly efficient data structures, so you should not do anything extra there.

[@MuhammadIbrahim-we7cq]

Very good and true explanation Dmytro, even better than the official docs one. Do you have a recommendation for a resource that we could understand from it the real things going under the hood beside your great videos?

[@kousheralam8657]

Thanks man.

[@ksas323]

thank you Habibi

[@tvietnhat]

Great video. Thanks

[@igorigor806]

I haven’t used these decorators during developing apps in Angular, I just have my services providedIn: ‘root’. Does it necessarily mean that something’s wrong here and my code can/should be improved? Thanks for the videos, btw, finally some advanced stuff about Angilar on KZbin :)

[@DecodedFrontend]

Hi Igor! Hard to say without seeing your code but.. no, it doesn't strictly mean that something is wrong with your code. Very often providedIn : root is just enough ;)

[@sourishdutta9600]

Thanks for this lesson Man 👍 can you create one project with Angular using Nrwl nx with backend nest and another app in react or some other one in a same monorepo. It will be very helpful if you talking about that micro front end single repo architecture. Thank you so much. Another interesting topic can be Jamstack.

[@DecodedFrontend]

Hi Sourish! Thank you for feedback and suggestion. You are not the first who asks me for NX Workspaces, so I am actually working on it but it takes some time in order prepare it well. I don't want to promise but I think you could expect the first videos about NX somewhere in the end of December/beginning of January :)

[@sourishdutta9600]

@@DecodedFrontend Thank you so much. Appreciate your hard work 👍

[@nawazsharif7177]

thank you very much, man

[@minigeek]

could you please start ngrx series

[@DecodedFrontend]

Hi :) There will be tutorials about ngrx a little bit later this year :)

[@pajazinho]

YOU ARE GOLDEN

[@greg6618]

Great one :)

[@DecodedFrontend]

Thanks, Greg! :)

[@nuralikhoja8773]

Can you write a detailed blog on this ?

[@DecodedFrontend]

Yes! I gonna launch the Blog somewhere in 1st quarter of 2021 🙂

[@Seyedmostafahosseni]

its great 👌

[@jayeshsheta5380]

Why @self in app.Module not throw null injector error although you have not pass logger service in providedes array?

[@Someartem]

Because all eagerly loaded modules share the root module's providers, a service with {providedIn: 'root'} (LoggerService in that case) is instantiated in the root module's injector.

[@compton8301]

Thank you.

[@СуперИпполит]

thanks!

[@Powerful-Manifestor-]

Awesome!

[@DecodedFrontend]

Thank you! Cheers!

[@rock_0823]

I am facing difficulty understanding SkipSelf example. It might be getting service injected from root only, but you are overwriting the prefix to "App Component" when its Self, but not overwriting with SkipSelf, that is the reason might be you are getting prefix as "App Component" when its self and not when its SkipSelf.

[@哲綱許]

so goooooooooooooooooood!

[@DecodedFrontend]

Thaaaank you :)

[@masterlup]

@Host was the weird one but you explained it well.

[@artemshapilov668]

nice!

[@vikramadityakukreja6725]

Super!!

[@SouravDuttaROCKSTAR]

Wow, this is awesome, never knew about this before! I am now wondering what feature/requirement in a web app would use @Optional, @Self, @SkipSelf, @Host ...need to investigate more time on this looks interesting and fun! Subscribed, really valuable content here for Angular :D

[@DecodedFrontend]

Great you learned something new from the video ;)

[@williamxsp]

I had a component that I opened in a modal then I injected a modalRef inside this component so I can close it. But I also needed to open the same component like a page, so I didn't have a modalRef and I got this NullInjector error. Then I used @Optional() and everything is working fine.

[@ermahesh2009]

Great day

[@hellonishant]

just WOWWWW

[@DecodedFrontend]

Thanks!!!

[@swapnasaritnayak2569]

thank you :)

[@dasvas9383]

круто! спасибо)

[@DecodedFrontend]

Всегда пожалуйста)

[@SergioUkrAr]

Thanks)

[@brette]

Awesome

[@chagamajaykumarreddy1897]

nice

[@paymankhayree8552]

I couldnt understand host 😢😢

[@Dekutard]

but why would you ever use these? leaving a like btw. amazing content

[@DecodedFrontend]

Different reasons. For instance you may have a library that can be configurable and you inject the config via DI. Most probably you would like to have it optional and to not force user to provide own config but rather use some default one, so for this case you would use @Optional(). Sometimes Resolution Modifiers could be used as guards to be sure that the component is being used properly e.g you have a directive that must be used within some form and this directive injects this parent form. In this case I would decorate it with @Host() because it looks for the provider only within the view where the directive was declared. If there is no provider within the view (namely the parent form) then most probably the directive is used wrongly and I should notify a developer by throwing a warning or an error. If I don’t do it then Angular will go further through NodeInjector tree and might resolve a wrong provider and it will be caused of wrong behavior or runtime error. Same if I have component and its state is handled by a dedicated service. In this case I would use @Self() to be sure that I inject the service provided exactly for the component injector: not the global one from root injector, not from any other injector but the injector that belongs to this particular component.

[@Dekutard]

@@DecodedFrontend you're amazing. I'll try to like every video i watch from ya lol. I don't think there's much else i can do to provide value in return

[@minigeek]

damn that host shit is so complicated..thank you

[@krishnamrajuk222]

Great course, thank you so much!

[@_cipriangg_]

Awesome!