Chris Kohler

Navigate back to the homepage

Angular Dependency Injection Infographic

Chris Kohler,Β 
February 3rd, 2020 Β· 1 min read

🚨 I’ve updated the infographic. Go here for the latest version.

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.

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


Download Angular DI Infographic as PDF

Update 20.02.2020

  • Added providedIn: Module example
  • Simplified Provider Syntax (removed string tokens)
  • Minor design improvements

More articles from Chris Kohler

Improved Dependency Injection with the new providedIn scopes 'any' and 'platform'

A detailed look into the new scopes for providedIn with Angular 9

December 15th, 2019 Β· 3 min read

One bite at a time - How to introduce new lint rules in a large codebase

How to improve legacy code by gradually introducing linting rules.

November 26th, 2019 Β· 2 min read
Β© 2023 Chris Kohler
Link to $ to $ to $ to $