Chris Kohler

Navigate back to the homepage

Angular Dependency Injection Infographic Updated

Chris Kohler
January 16th, 2023 · 1 min read

Angular has its own dependency injection framework. It’s very powerful and helps increase the efficiency and modularity of your application. It can also be quite complex when compared to traditional DI frameworks.

I created a infographic for Angular dependency injection a while ago. Now I updated the infographic with the latest features up to Angular 15.

Updates with Angular 14

With Angular 14 a new feature was released that allows us to inject providers using the inject() function instead of using the constructor class.

So how can we use the new functionality? Lets says we have the following service defined:

1@Injectable({
2 providedIn: “root”
3})
4export class MyService {}

Traditionally we injected the service via constructor:

1@Component({ ... })
2export class MyComponent {
3 constructor(myService: MyService) {}
4}

With Angular 14 we can also inject the service via inject() function:

1@Component({ ... })
2export class MyComponent {
3 myService = inject(MyService);
4}

If you want to learn more about the inject function and why and when to use it I can recommend the following blog posts:

Documentation

The official documentation is very well written and a must read for every Angular developer. The only thing missing for me was a good graphical overview. This is why I created this infographic poster.

👩‍🚀 Protip: 🖨 Print your DI poster and hang it in the toilet. Within a few weeks your work colleagues are DI experts 😀

✅ Also feel free to use the poster for education purposes like workshops or in classes.

👆 It took me hours to complete this cheatsheet. If you like it follow me on twitter and spread the word 🙌

🤓 Did you find a mistake? Please help improve the infographic and open an issue here

Download Angular DI Infographic as PDF

thumbnail

Download Angular DI Infographic as PDF

More articles from Chris Kohler

Computed Properties in Angular

All you need to know about computed properties in Angular

July 29th, 2022 · 4 min read

Angular View Engine was removed - What you need to know

What does the deprecation of the View Engine in Angular 13 mean for you?

November 15th, 2021 · 3 min read
© 2023 Chris Kohler
Link to $https://twitter.com/kohlerchristianLink to $https://github.com/christiankohlerLink to $https://instagram.com/mrchriskohlerLink to $https://www.linkedin.com/in/mr-christian-kohler/