Angular Inject Function - New Way to Inject Services in Angular 14?

Angular 14 is about to be released and it brings a lot of new features. One of that features is the angular inject function that has been existing since Angular 9 but with Angular 14 it gets more areas where it could be applied. About that, we are going to talk in this video and have a look at some base use cases. What do you think about it? Let's discuss it in the comments!

✂️ Coupon YOUTUBE_DISCOUNT to get a 10%-off discount ✂️

🕒 Time Codes:
00:00:00 - Intro;
00:00:50 - How we could use inject() before Angular 14;
00:05:39 - Scenario 1 - Injectiong Injection Tokens;
00:08:37 - Scenario 2 - Simplifying Inheritance;
00:13:58 - Scenario 3 - Inject Function/Composition Function;
00:18:26 - Final Notes;
00:20:29 - Outro;

Source code on GitHub:

↙️ Short Frontend Snacks every week here:

🔗 Useful links about this topic

#angular #angular14 #webdevelopment #ng

[DecodedFrontend]

✂ Coupon YOUTUBE_DISCOUNT to get a 10%-off discount ✂

[WaldirNeto_inspiration]

Your channel is helping me a lot, oddly enough you are helping me to understand more English, the way you speak slowly is wonderful, and your angular content is amazing!!!
Brazilian here

[blokche_dev]

The most valuable youtube channel related to angular topics. Thanks for sharing!

[MPDY]

I really appreciate the work you are doing and I improved so much since I find your channel and take your angular course. See you in the next video

[arthurfedotiew]

Lots of thanks for sharing your vision, Dmytro!
I think the most beneficial thing of this inject() is ability to use it for inheritance, since as You properly mentioned we do keep using inheritance once in a while, and I personally had nervous twitches passing deps through constructor just to satisfy the contract ;)

[paulh]

It looks like inject can help a lot with component inheritance. It could be done before, but was kludgy. Is component inheritance still discouraged? if yes can you point me to something describing the issues

[ytamb]

If you need to use component inheritance for different templates, then the inject() function in the base class looks really useful. Thanks for another great video that explains the concepts as well as real-world application.

[haroldpepete]

i see it really helpful, the code looks cleaner and you can use it a special cases, dont't be afraid i never dislike your video, i think you do a awesome job and me best way to support your job is through thumb up and never down

[gund_ua]

Hey Dmytro! Thanks for your videos as always great stuff!

I just want to point out that while the inject function looks cool and all using it like that basically turns the Dependency Injection pattern into a Service Locator - which is considered an antipattern for mainly hiding dependencies from the consumer. It has some use-cases but in most cases you would always want to stick with proper constructor injection. And btw you can use the inject function in the constructor as a default value and this will still be a DI pattern which is nice.

Also I can share one use-case when I use the Service Locator pattern, it was in a base component for table features that was part of public api in the library so basically I did not want users that would create features for table to depend on the implementation details of my base class so I just injected Injector and then inside the constructor was injecting everything else which is basically the same as just using inject function. So in this one case the tradeoff was worth it as now I could change my base class without introducing breaking changes to public api.

Anyway that's a lot of text already.
Thanks a lot for the content again!
Cheers!

[demidovmaxim]

Thanks a lot for the new video. As always they are very helpful.

[drone-plus-plus]

Hello, Dmytro!

It reminded me of when I pass an injector from a child class to a parent class, but after a short period of time I rewrote everything back. Here is a small example:

`
class Base {
protected param: Param;
protected param1: Param1;

constructor(injector: Injector) {
this.param = injector.get(Param);
this.param1 = injector.get(Param1);
}
}

class Child extends Base {
constructor(injector: Injector, private childParam: ChildParam) {
super(injector);
}
}
`

When we use the injector as a service locator, then we violate the encapsulation, we also violate the segregation of interfaces, and in general, the service locator is an anti-pattern.
Based on that, don't you think it's pretty much the same thing? Because now it is not clear what dependencies are needed to make this class work.

[xingfucoder]

Hi Dmytro, great video. Only one question, could be solved the concern about the injectState function with a generic version for example injectState<T>(...) and inside the inject function this generic type? then we could delegate to the injectState function consumer the type specification.

[vkiperman]

Reduced boilerplate is a great thing!
Great video! Thanks!

[HosseinSalmanian]

Many thanks for the time you take for creating precious content such this.
I've watched it to the end.
As you've said using inject function should have a specific reason like what you mentiond.
But in general don't you think it's similar to 'Service Locator' which consider as an anti pattetn?

[hansschenker]

make injectState generic: injectState<T>(key: keyof T) to have more type safety!

[collinsk]

Very good tutorial. As you mentioned, a key risk with Inject() is the obfuscation of possible hierarchical dependencies.

[maks-yaremenko]

Your videos are great, thank you for your hard work. Good luck!

[yekaterinacrawford]

Surprised that you still don't have at least 100K subscribers!

[pedrinhofernandes]

I can really see the benefit of this injection for example on decorators to inject services.

[gleisonsubzeroKZ]

Great, but how would it be a unit test for this function?