Angular logo with a service token being injected into a component, illustrating dependency injection in Angular
Back to Blog
Frontend Development
February 17, 2021
Soumya Rauth

Dependency Injection in Angular 12, an Overview - Part 1

How dependency injection works in Angular: what the injector does when modules depend on each other, and why it beats importing directly.

Angular logo with a service token being injected into a component, illustrating dependency injection in Angular

In Angular project it is often required for parts of the App to communicate with the other modules in the App. In such cases we simply import the external module to the dependent class. For instance if a module One is imported inside the module Two then we can say that module Two is dependent on module One.

Basically, what Dependency Injection does is it makes parts of the app accessible to the other parts of the program. This also means that you don’t have to use the new keyword every time you create a class instance. If you are wondering that how it is convenient not to use the new keyword. Well just think that you have created and used instances of your class in let’s say 50 times in your projects in different places and now it has become absolutely necessary to add some new properties into your class definitions. As a result you not only had to update the class definition but also had to make changes to all those 50 places and also may be to all their dependencies.

Dependency Injection Diagram in Angular
Dependency Injection Diagram in Angular

The Dependency Injection in Angular is handled by the Angular Dependency Injector. What an injector basically does, it creates and Injects the Service we want to use across the Application. What you can see in the diagram is, a service is required to be injected to the Component. The injection is accomplished by registering the Service into the App Module Provider Object. As a result, the service can be used into the Component where we want to use to the service.

It is worth noting that Dependency injection is a Design Principal which is used in many different frameworks, not only in Angular

The key benefit of using Dependency Injection is, the dependent components don’t need to know how to Create the Dependency or to create the instances of it. All the components have to be concerned is to how to interact with that dependency.

Stay tuned for the next part of the discussion on Dependency Injection. There are a lot more to cover in this Topic.

Need this inside a real product? ARITS does front-end and web platform work.

Need extra engineers, or a team to run the build?

Tell us the shape of the work and your deadline. You will get a straight read on what it takes and what it will cost, from a team that has shipped 400+ projects out of Dhaka and London.

Cookies

We use cookies to see how people find this site and to measure our ads. You can turn those off — everything here still works. Privacy policy

Necessary

Keeps the site working and remembers this choice.

Always on

Analytics

Anonymous stats on which pages get read, so we know what to write next.

Marketing

Lets us measure which ads brought someone here.