Angular dependency injection in depth - Dependency providers (2021)

💥Angular courses made by Dmytro - bit.ly/df-courses 💥
✂️Use coupon KZbin_DISCOUNT to get a 10%-off discount
Hello guys! Let's continue to talk about in-depth topics of #Angular dependency injection. Today I would like to show you dependency providers like useClass, useExistiong, useValue, and use factory. Likewise, resolution modifiers control how Angular resolves dependency - dependency providers responsible for how Angular should create dependency instances. It allows you to replace different service implementations in runtime which makes your application extremely powerful and flexible. I hope you find I lot of use-cases in your applications. Thank you for your attention and enjoy watching! 😉
Angular Dependency Injection - Understanding hierarchical injectors (2020)
• Angular Dependency Inj...
Angular Dependency Injection in Depth - Resolution modifiers (2020)
• Angular Dependency Inj...
🕒 Time codes:
00:00:00 - Intro
00:01:00 - Quick recap of how we provide dependencies
00:01:18 - Describing the problem
00:03:14 - useClass in Action
00:05:46 - useExisting in Action
00:07:44 - useValue in Action
00:09:06 - A little bit about InjectionToken()
00:12:26 - useFactory in Action
00:15:11 - useValue vs useFactory. What's the difference?
00:16:24 - multi:true announcement
00:16:43 - 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]

🙌You can support this channel buying one off my courses here bit.ly/df-courses! 👉Use coupon code *KZbin_DISCOUNT* to get a 15%-off discount for all my Angular Courses.

[@UIGems]

Great video! Dislikes are from Angular documentation team 😁

[@DecodedFrontend]

Dear developers! Thank you for watching my videos. I hope you will find it useful and I appreciate any feedback from you in comments. Have a productive week 😉 P.s IMPORTANT!!! @Alex Malkevich suggested in comments a very nice approach which allow you to make your useFactory even more flexible. Instead to provide all dependencies in deps: [...] you can provide just Injector and get dependencies via Injector.get(YourServiceHere). Using this approach you should not care any more if your factory function will get new dependency or if dependency order will be changed. The pseudo-code would look like this: { useFactory: (injector: Injector) => injector.get(APP_CONFIG).experimentalEnabled ? ... : ... , deps: [Injector] } Thanks for suggestion, Alex!

[@bukanaka]

Гуд

[@collinsk8754]

Now you can even use the 'inject(YourServiceHere)' in v14+

[@saulo5216]

That's really good, mate! Saved me from a lot of trouble. Unfortunatelly the Angular documentation does not have as many examples as here, but now I think I have a solid grasp on that topic!

[@danieldouglas8953]

Very well explained and it's good to see some real world examples of usage which is something a lot of videos lack.

[@mikojan85channel]

12:25 "I hope that it is clear now" I wish it was clear, it's complicated, I am still learning it.

[@yuriiilnytskyi7698]

Dude, you did a really great job. I was aware about these features of Angular DI but also, I was always a bit struggling with deep understanding how does it work under the hood. Now I'm happy that I do :) Thank you man!

[@rembautimes8808]

Mezh is probably *the* best angular content creator especially for advanced topics. DI is a fantastic tool if incorporated early in a project as it allows for significant code reuse making it much more maintainable and robust. I watched this video on DI several times and finally plucked up the courage to use Injection tokens for the first time in my side project.

[@johnadaikalasamy]

great video, well explained. Thank you very much :)

[@collinsk8754]

Very comprehensive tutorial. Thanks.

[@rikisyahputra3805]

I don't know why angular DI is so much easier to understand when watching this rather than reading the docs

[@DecodedFrontend]

Because these videos were made with love 😀

[@nasheedstation260]

Awesome Awesom Awesome Video! Very detailed explanation! Thanks! :)

[@lhargil]

This was well-explained. Thank you very much. :)

[@DecodedFrontend]

You are welcome 🙏🏻

[@kousheralam8657]

Thank you bro, learned a lot.

[@Powerful-Manifestor-]

Awesome explanation!

[@sanjaygarg3540]

Very nice explanation !! Loved it!!

[@DecodedFrontend]

Hi Sanjay, Glad you liked it ;)

[@rajanjoseph4877]

Wow! It's really useful to me! Thanks a lot 👍

[@DecodedFrontend]

Glad it was helpful!

[@calbofacundo8549]

literally you are the best man wtf

[@leonardopeixoto387]

Great class, thanks for making it ! One smal correction, tho - on 5:55 you say that useClass has this "feature" of creating new instance, suggesting that regular methods of providing doesnt create new instances. But I just did a small experiment - when Loggerservice is provided in providedIn clause in itself and on providers clause of component, each one of those create new instances of LoggerService. I tested it creating an Input to pass the external logger, and compared it with the logger provided in the "providers" clause of the component itself - result different. Did a test incrementing a count property in the LoggerService to compare, and confirmed - they were two independent instances.

[@SouravDuttaROCKSTAR]

This could be really useful to extend an existing project let's say a codebase developed for one country can be used by other teams to accommodate changes for other countries based on the useFactory concept ... Gonna use this approach, just awesome :D

[@DecodedFrontend]

Great! Let me know how it eventually worked out for you :)

[@dmitriy5906]

Wow thanks. That was useful especially useFunction part

[@DecodedFrontend]

Hi Dmitriy! Glad to hear it 😊 thank’s for feedback

[@rs4267]

Thanks I've learned something new 🎉

[@user-fc6yy4vu3w]

very good, thanks

[@sidharthaverma9609]

I can only say thank you so much!!!!!!!

[@DecodedFrontend]

Glad you liked it!

[@pavelsokolov4190]

Could you please provide more cases where it can be useful except of the experimental mode?

[@Don-sl1ny]

Hello What is the practical use case of useclass provider.

[@umakantlakhawar9092]

Thanks you so much for explaining DI in Angular in simple words. I have watched all your videos on Dependency Injection, very nicely explained . I want to memorize/revise these concepts quickly within few minutes, so could you please provide the source code for the same.

[@DecodedFrontend]

Hi! Unfortunately I didn't save the source code from this episode :(

[@mouradbosli5497]

Great video man

[@DecodedFrontend]

Thank you, Mourad🙂

[@rahultej8352]

u r the best

[@chrisfelix9065]

All your videos are better than the Angular Docs

[@Sunill_Waugh]

Please create a video on creating components from configuration file dynamically, thanks

[@Bukratusi]

Hatsoff thanks

[@shivanimehrotra187]

Please make a video on Angular Change Detection and Ivy Renderer.

[@DecodedFrontend]

I find Ivy also very interesting topic. Recently I exactly started to investigate more about it. Maybe quite soon there will be a video ;)

[@joshblf]

It would be cool if you went in depth on tree-shakable providers. You mentioned them a few times but didn't really go into it.

[@DecodedFrontend]

Hi! Here is such a vid ;) kzbin.info/www/bejne/pH_WdYqFqa2Ees0

[@amaizingcode]

SOS: Hello Dmytro, hope you're well. In minute 4:53 you said that useClass: EperimentalLoggerService is like return new EperimentalLoggerService (...params) But actually how could we add params to that class? and also if the params are generated by the component at run time, it is possible to added them?

[@DecodedFrontend]

Hi Julian, They will be resolved by DI automatically. Just don't forget to annotate EperimentalLoggerService class with @Injectable() because otherwise angular won't be able to inject dependencies for EperimentalLoggerService. For the second part of the question, I would need some examples of what are you going to achieve. But if I understand right, you won't be able to provide properties because at that time most probably your providers will be already resolved and instantiated.

[@mohammadmokhtari8]

👌👌👌

[@bukanaka]

Здравствуй, Дмитрий. Спасибо за столь отличный материал. Но у меня всё-таки есть недопонимание на счёт useClass/useExisting. В чём разница между обычным провайдом providers: [SomeService] и через useExisting, например, providers: [{ provide: SomeServiceTwo, useExisting: SomeService}] ? То есть в чём смысл такой подачи сервиса под другим "соусом"? Или в этом нет никакой разницы с точки зрения реализации кода, а всего лишь дело в каких-то паттернах, которые это требуют? Благодарю заранее.

[@DecodedFrontend]

Привет! Спасибо за отзыв) Ну как пример, часто возникает ситуация, что много компонентов зависят от одного сервиса, например UserService. То есть у нас есть десятки компонентов в конструкторе которых имеем constructor(private user: UserService) {} и бывает часто, что нам нужно подменить реализацию UserService какой-то другой в которой, например, в которой более производительный алгоритм (прим. PerformantUserService), но мы не хотим лезть в каждый конструктор компонента и менять UserService на PerformantUserService и более того, иногда мы можем не иметь доступа к исходному коду этого компонента (прим. Компонент часть библиотеки) в таком случае мы используем useExisting и таким образом одним махом мы подменяем реализацию для всех компонентов, не трогая их конструкторы). Это более безопасно и менее затратно по времени)

[@pedrinhofernandes]

What would be the best approach when, let's say, you had your application making the API calls on the same base URL but then some module(new section) was introduced that would make calls to a different base API URL?

[@DecodedFrontend]

Hi, Pedro! The first think which comes to my mind is to make those modules lazy loaded and provide your injection token with URL into those modules (instead of 'providedIn: root'). When Angular loads lazy module it creates a child injector and all components/services in this module should in theory resolve endpoints which you provided for this concrete lazy module. Also you could play around with Injector.create() API which allows you to create injector manually in the Injector hierarchy and you can provide different URLs on different levels.

[@frontend3409]

That's strange that the Angular's error @ 8:34 tells that there is no provider for Object. Message should be that there's no provider for LegacyLogger object or smth...

[@pakkaodia]

love from india make tutorial of content projection

[@DecodedFrontend]

Thanks! :)

[@dawidniegrebecki2205]

Such a great video! Coming from the ReactJs background, the dependency injection in angular was totally not understandable for me, but you explained it great! Thank you!

[@piracyable]

This video really helped me to understand the DI in angular. Can you pls suggest how following can be accomplished? In 13:45, how to use the component @input variable to decide which service instance is to be created.

[@DecodedFrontend]

Hi! I am afraid that it won’t possible because DI resolves everything before input binding will be resolved.

[@piracyable]

@@DecodedFrontend If we need to dynamically instantiate the service, do we have to create the instance with new keyword without using the DI? or we have some other alternatives?

[@mahdirezazadeh5076]

Thank you 🌷 Just use larger font for watching comfortable

[@DecodedFrontend]

I will keep in mind, thanks for the hind and feedback :)

[@mahdirezazadeh5076]

@@DecodedFrontend keep going you are great 👏

[@cristhianmahecha1707]

I still don't understand why when comparing the two they give false with the useClass, if when giving console.log of both services the same object is obtained, So if the Injector is not supposed to do: token: LoggerService => Value: new ExperimentalLoggerService(), and using the private experimentalLogger: ExperimentalLoggerService, the injector does: token: ExperimentalLoggerService=> Value: new ExperimentalLoggerService(). To then inject the instances when the component is created, they both have the same value but their token is different. It should give true since its value is the same instance, I don't understand 😕

[@rahultej8352]

why the syntax factory:()=>({}) instead of factory:()=>{}

[@DecodedFrontend]

Thanks for your question. This is Because I return an object from the factory. The => ({}) is a short version of => { return { … } }

[@sorrybuddy4460]

Am a beginner its hard to understand 🥲

[@rembautimes8808]

I was a beginner as well but keep practicing and trying.