Introducing Angular DI

Dependency injection (DI) is an application design pattern we also come across in other languages, such as C# and Java. As our applications grow and evolve, each code entity will internally require instances of other objects, better known as dependencies. Passing such dependencies to the consumer code entity is known as an injection, and it also entails the participation of another code entity called the injector. The injector is responsible for instantiating and bootstrapping the required dependencies to be ready for use when injected into a consumer. The consumer knows nothing about how to instantiate its dependencies and is only aware of the interface they implement to use them.

Angular includes a top-notch DI mechanism to expose required dependencies to any Angular artifact of an Angular application. Before delving deeper into this subject, let’s look at the problem that DI is trying to address in Angular.

Previously, we learned how to display a list of objects using the ngFor directive. We used a static list of Product objects that were declared in the ProductListComponent class, as shown here: