Angular dependency injection in depth - Dependency providers (2021)

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

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

[@mikojan85channel]

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

[@UIGems]

Great video! Dislikes are from Angular documentation team 😁

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

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

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

[@collinsk8754]

Very comprehensive tutorial. Thanks.

[@lhargil]

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

[@DecodedFrontend]

You are welcome 🙏🏻

[@rajanjoseph4877]

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

[@DecodedFrontend]

Glad it was helpful!

[@nasheedstation260]

Awesome Awesom Awesome Video! Very detailed explanation! 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 😀

[@sanjaygarg3540]

Very nice explanation !! Loved it!!

[@DecodedFrontend]

Hi Sanjay, Glad you liked it ;)

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

[@Powerful-Manifestor-]

Awesome explanation!

[@kousheralam8657]

Thank you bro, learned a lot.

[@dmitriy5906]

Wow thanks. That was useful especially useFunction part

[@DecodedFrontend]

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

[@calbofacundo8549]

literally you are the best man wtf

[@johnadaikalasamy]

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

[@rs4267]

Thanks I've learned something new 🎉

[@pavelsokolov4190]

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

[@sidharthaverma9609]

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

[@DecodedFrontend]

Glad you liked it!

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

[@Don-sl1ny]

Hello What is the practical use case of useclass provider.

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

[@chrisfelix9065]

All your videos are better than the Angular Docs

[@Kunjan-g3l]

14.05 setting experimentalEnabled: true manually, How can i access this boolean from html and change the value like using a button

[@AhmedMansour-k8c]

very good, thanks

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

[@mouradbosli5497]

Great video man

[@DecodedFrontend]

Thank you, Mourad🙂

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

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

[@Sunill_Waugh]

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

[@pakkaodia]

love from india make tutorial of content projection

[@DecodedFrontend]

Thanks! :)

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

[@rahultej8352]

u r the best

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

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

[@Bukratusi]

Hatsoff thanks

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

[@bukanaka]

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

[@DecodedFrontend]

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

[@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 { … } }

[@mohammadmokhtari8]

👌👌👌

[@VK-sn3sn]

It would be better if you could provide real life use cases for all of them. Because these are just Talks, we can you this, or that. But untill it is really used in Development, it is useless

[@sorrybuddy4460]

Am a beginner its hard to understand 🥲

[@rembautimes8808]

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