Understanding Dependency Injection in Angular

In this post we will be learning about Dependency Injection, Angular has its own Dependency Injection framework and its used to design Angular applications to increase the applications's efficiency and modularity. Dependency Injection is nothing but an application design pattern or a coding pattern where a class, when is instantiated, asks for dependencies from external sources rather than the class creating them itself.

For Example : You have some data array defined in the class which you want to use throughout your application. What you can do is to get the array in your class and use it, this works most of the time but for bigger application it will be very hard to track down the changes done to that array. For this we will use Service.

Dependencies in Dependency Injection are services or objects on which a class needs to perform its function and thus its asks for it from external sources rather than creating by itself.

Create a Injectable Service, Using the below Angular CLI command a service will be created for you :

ng generate service myData

It generates the below code

import { Injectable } from '@angular/core';

@Injectable()

export class MyDataService {

  constructor() { }

}

The above class provides a service, where we can write a function which exposes the data array for us. The main part is @Injectable() decorator which marks it as a service which can be injectable, though its not required. Injectable() decorator is only required if your service has injected dependencies which means if your service requires an another service.

Now we need to Inject the above service to our component where we will need it. For that we have to tell Angular to inject a dependecncy in a component's constructor by specifying a constructor parameter with the dependency type as shown below :

import {MyDataService} form '../myData.service'

constructor(myData: MyDataService)

Before learning how to use it, lets learn about Hierarchical Dependency Injectors. To tell you in simple words Angular Dependency Injection system is hierarchical that means you can configure the injectors at any level of the component tree. Lets say if we have provided a service in one component, the Angular will create an instance of that service in that component and that service is shared by that component and all of its child component (they will share the same instance of the service).

Let's go through some of the places where you can inject Services and where the that service can be shared :

AppModule - The Same Instance of the service is available Application-Wide (all components, all directives and in all services).

AppComponent - The Same Instance of the service is available for all components but not for other services.

Any Component - The Same Instance of the service is available for the component and all its child components.

Thus instead of using providers: [], we can also take advantage of providedIn property of @Injector decorator. Just think of providedIn as specifying dependecies in reverse fashion that means now the service itself declaring where it should be provided.

@Injectable({
  providedIn: 'root'
})

So in the above code we have declared as 'root', which actually means that it will be used application wide. You can also write the name of your component in the providedIn which will make this service instance available for that component and all of its child component.