Angular Dependency Injection in Depth - Resolution modifiers (2021)

In this #Angular tutorial we will continue to explore Angular dependency injection in depth and we will learn what is resolution modifiers in Angular DI and see them in action. We will cover all 4 modifiers like: @Optional() vs @Host() vs @Self() vs @SkipSelf(). Each of this annotation impact on how Angular will be resolving dependencies in the injector tree. I hope you will learn something new from this video, so thank you for your attention and 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
Angular Dependency Injection - Understanding hierarchical injectors (2020)
• Angular Dependency Inj...
🕒 Time codes:
00:00:00 - Intro
00:00:37 - Quick recap of how Angular resolves dependencies
00:01:30 - What are resolution modifiers?
00:01:55 - About @Optional()
00:04:39 - About @Self()
00:08:22 - About @SkipSelf()
00:09:49 - About @Host()
00:14:01 - Outro
------------------ See my another videos about Angular ------------------
✅ Check out my video "My TOP 5 Angular Interview Questions"
• TOP 5 Angular Intervie...
✅ Check out my videos about Angular Material Library:
• Angular Material
✅ Check out my videos about Angular CDK:
• Angular Material CDK
🔗 Links:
More about Dependency Injection:
angular.io/guide/dependency-i...
#angulartutorial #webdevelopment #dependencyinjection

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

[@giorgimerabishvili8194]

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

[@DecodedFrontend]

Thanks so much 😊

[@SajeelBongale]

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.

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

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

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

[@harsh55]

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

[@DecodedFrontend]

Thanks, Harsh :)

[@tarassavchenko2317]

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

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

[@bennyt1635]

Excellent 👌🏼

[@DecodedFrontend]

Thank you! I appreciate it :)

[@puriajahanbani6636]

What you teach us is absolutely pure gold!

[@ariMuayad]

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

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

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

[@jakubrakowski3429]

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

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

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

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

[@TheGeekWing]

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

[@shivanimehrotra187]

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

[@DecodedFrontend]

Thanks a lot :)

[@krishnamrajuk222]

Great course, thank you so much!

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

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

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

[@rohitkumar-sl6vn]

Awesome content. Easy to understand the content

[@lucaspham5238]

High quality contents, subscribed. Keep it up bro.

[@user-iq334]

Great content, thanks. Learning a lot.

[@user-wf8jz3om4m]

Amazing Explanation man. So much clarity.

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

[@fawadmukhtar2234]

You explained very nicely. thank you

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

[@singhkumardev]

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

[@DecodedFrontend]

Thanks a lot !

[@akashwasson4220]

bro, you are pro! Thanks a lot!

[@abhisheksitar]

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

[@DecodedFrontend]

Thanks, will do!

[@zakizaz1]

Amazing work .. Thank you

[@sefatanam]

awesome man !

[@caiosotans]

Thank you very much!

[@zrowork198]

great stuff! thank you

[@DecodedFrontend]

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

[@_cipriangg_]

Awesome!

[@maciejkamela5292]

Thank you, really nice and clean explanation.

[@DecodedFrontend]

Thanks a lot for the feedback 😊

[@kousheralam8657]

Thanks man.

[@andreykositskiy649]

thx for your work 🤗

[@tvietnhat]

Great video. Thanks

[@misza1597]

Great explanation! keep it up! :D

[@DecodedFrontend]

Thanks! 😃

[@nawazsharif7177]

thank you very much, man

[@Alex-bc3xe]

Thanks for explanation was very helpful.

[@dmitriy5906]

Nice! Please continue

[@DecodedFrontend]

Thanks! I will 😉

[@tomaszknapczyk478]

YOU ARE GOLDEN

[@nanasarathi]

Well explained 👍 Thanks for creating this video 🙏

[@DecodedFrontend]

You are welcome 🤗 glad you liked it

[@amrmohamed2608]

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

[@VipinRawat_Offcial]

Nice explanation 👌👌

[@vikramadityakukreja6725]

Super!!

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

[@gishanabeysinghe977]

From Sri Lanka, Thanks from ANGULAR SRI LANKA

[@DecodedFrontend]

Hello Sri Lanka!😊 Thank you for feedback!

[@compton8301]

Thank you.

[@Seyedmostafahosseni]

its great 👌

[@user-wi1dg7bf1u]

thanks!

[@artemshapilov668]

nice!

[@swapnasaritnayak2569]

thank you :)

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

[@brette]

Awesome

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

[@hellonishant]

just WOWWWW

[@DecodedFrontend]

Thanks!!!

[@greg6618]

Great one :)

[@DecodedFrontend]

Thanks, Greg! :)

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

[@ksas323]

thank you Habibi

[@SergioUkrAr]

Thanks)

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

[@dasvas9383]

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

[@DecodedFrontend]

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

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?

[@user-xk8tk4et4g]

so goooooooooooooooooood!

[@DecodedFrontend]

Thaaaank you :)

[@ahmedelrawy5614]

awesome

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

[@ermahesh2009]

Great day

[@mohininarwade9686]

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

[@mohininarwade9686]

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

[@jonatabiondiJsLover]

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

[@chagamajaykumarreddy1897]

nice

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

[@minigeek]

could you please start ngrx series

[@DecodedFrontend]

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

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

[@masterlup]

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

[@abhavluthra578]

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

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

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

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

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

[@jayeshsheta5380]

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

[@artemzatula7197]

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.

[@nuralikhoja8773]

Can you write a detailed blog on this ?

[@DecodedFrontend]

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

[@minigeek]

damn that host shit is so complicated..thank you

[@rajeshuoh]

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.

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

[@paymankhayree8552]

I couldnt understand host 😢😢

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

[@jojojawjaw]

Great course, thank you so much!

[@DecodedFrontend]

You are welcome! :)

[@Powerful-Manifestor-]

Awesome!

[@DecodedFrontend]

Thank you! Cheers!