Angular uses the Dependency Injection design pattern, which makes it extremely efficient. This programming paradigm allows classes, components, and modules to be interdependent while maintaining consistency. This reduces the frequency with which the class changes.
What Is Dependency Injection?
Known to be a programming paradigm, dependency injection is what makes a class independent of its dependencies. Dependency injection enables the creation of dependent objects outside of a class while providing those very objects to a class in numerous ways.
Consider two classes, A and B. Let’s assume that class A uses the objects of class B. Normally, in OOPS, an instance of class B is created so that class A can access the objects. Using DI, we move the creation and binding of the dependent objects outside of the class that depend on them.
Typically, there are three types of classes, they are:
- Client Class - This is the dependent class, which depends on the service class.
- Service Class - Class that provides the service to the client class.
- Injector Class - Injects the service class object into the client class.
Types of Dependency Injection in Angular
There are three types of Dependency Injections in Angular, they are as follows:
- Constructor injection: Here, it provides the dependencies through a class constructor.
- Setter injection: The client uses a setter method into which the injector injects the dependency.
- Interface injection: The dependency provides an injector method that will inject the dependency into any client passed to it. On the other hand, the clients must implement an interface that exposes a setter method that accepts the dependency.
Now that you know what DI is, and its types, let’s look at its advantages.
Advantages of Dependency Injection
Dependency injection offers some incredible advantages. Here are some of them
- Dependency Injection helps in Unit testing.
- Boilerplate code is reduced, as initializing of dependencies is done by the injector component.
- Extending the application becomes more manageable.
- It helps to enable loose coupling, which is essential in application programming.
The Drawbacks of not using Dependency Injection
Consider a Postal details class that is dependent on the Number and the Address class
In the PostalDetails class, the constructor creates copies of the Number and address. So when you instantiate a new PostalDetails class, the constructor instantiates a unique number and address.
Although this looks simple, there’s a problem with this code. Let’s assume that the Number and Address classes’ constructors now accept parameters.
When we change the Number class, the PostalDetails class is broken. To overcome this, we need to pass in a parameter to the Number constructor. This applies to the Address class as well.
- The first drawback is that the code is not flexible. Any time the dependencies change, the PostalDetails class needs to be changed as well.
- The second drawback is that this code is not suitable for testing. Anytime you instantiate a new PostalDetails class, you get the same Number and Address. Even if you change the Number and Address classes, what if these classes, in turn, have dependencies?
As a result, we are not in control of the code, and here’s where Dependency Injection comes into the picture.
Dependency Injection as a Design Pattern
DI is a coding pattern where a class receives its dependencies from an external source rather than creating them itself.
In the above example, we have moved the definition of the dependencies from inside the constructor to the constructor’s parameters. So the PostalDetails class doesn’t create the dependencies anymore. It just consumes them. The creation of those dependencies is external to this class, and by doing so, we now solve both the drawbacks.
Now that you know why Dependency Injection is vital, let us show you a simple demonstration.
Demo: Injecting Services into Components to Display a List.
In this demo, we'll create a service class and inject the same into a component that displays a button for the user. The service holds employee details such as name, employee ID, and email ID. When the user clicks on the display button, the same will be displayed.
Step 1: Create a component to display the employee records. Use the command
ng g c <component name> for the same. The component we’ve created is called emp_info
Step 2: Create a service using the command, ng g service <service name>. We’ve created a service called records. Once run, two files records.service.ts and records.service.spec.ts are created. The service consists of the employee data that needs to be displayed. We will be using three arrays for this purpose.
info1: string[]=["Adam Taylor",'E354', 'at@abc.net']
info2: string[]=["Shawn Wilson",'E673','sw@abc.net']
info3: string[]=["Mark Fisher",'E865','mf@abc.net']
With the agenda to retrieve this data in our component, we use a method, for the same. This method returns the employee data.
getInfo1():string[]{
return this.info1
}
getInfo2():string[]{
return this.info2
}
getInfo3():string[]{
return this.info3
}
Step 3: In order to retrieve this information in our emp_info.component.ts, we need three more arrays.
infoReceived1: string[]=[];
infoReceived2: string[]=[];
infoReceived3: string[]=[];
getInfoFromService1(){
this.infoReceived1 = this.rservice.getInfo1()
}
getInfoFromService2(){
this.infoReceived2 = this.rservice.getInfo2()
}
getInfoFromService3(){
this.infoReceived3 = this.rservice.getInfo3()
}
As mentioned, services are implemented using dependency injection. We import the service class into the component.ts file. The key reason behind doing this is to tell Angular that when the component is created, an instance of the service class is also made to perform all the necessary tasks. We must also declare this instance in the providers’ array of the component. However, to access this instance, an object is created that can access the methods and variables of the service class. We’ve created the object rservice for the same.
import { Component, OnInit } from '@angular/core';
import { RecordsService } from "../records.service"
@Component({
selector: 'app-e-info',
templateUrl: './e-info.component.html',
styleUrls: ['./emp -info.component.css'],
providers: [RecordsService]
})
export class EmpInfoComponent implements OnInit {
infoReceived1: string[]=[];
infoReceived2: string[]=[];
infoReceived3: string[]=[];
getInfoFromService1(){
this.infoReceived1 = this.rservice.getInfo1()
}
getInfoFromService2(){
this.infoReceived2 = this.rservice.getInfo2()
}
getInfoFromService3(){
this.infoReceived3 = this.rservice.getInfo3()
}
constructor(private rservice: RecordsService) { }
ngOnInit(): void { }}
We’ve highlighted the code for better visibility.
Now that you’ve learned how to create the service and inject it into the components, let’s move on to the UI of the application. We’re creating a button for each employee.
Step 4: In the component.html file, we are creating an unordered list. We are also using the *ngFor directive to loop over the record fields.
<button type="button" name="button" (click)='getInfoFromService1()'>Employee1</button>
<ul class="list-group">
<li *ngFor = "let info of infoReceived1" class="list-group-info">{{info}}</li>
</ul>
<button type="button" name="button" (click)='getInfoFromService2()'>Employee2</button>
<ul class="list-group">
<li *ngFor = "let info of infoReceived2" class="list-group-info">{{info}}</li>
</ul>
<button type="button" name="button" (click)='getInfoFromService3()'>Employee3</button>
<ul class="list-group">
<li *ngFor = "let info of infoReceived3" class="list-group-info">{{info}}</li>
</ul>
A bootstrap class of “list-group-info” is created to interpolate “info” which displays the contents of the info variable. In order to call the methods in the .ts file, we bind them with the button. Since it is bound with the click event, it is called when the button is clicked.
Step 5: Create the custom HTML tag for the component and add it to the main component.html file. We’ve also added a simple message and the Simplilearn logo for an aesthetical feel.
<img src= "assets/Logo.png" class="center" width="200" height="80" display:block>
<h1>Angular Dependency Injection</h1>
<app-emp-info></app-emp-info>
Once you run the application using the ng serve command, the output looks like this:
So this is how you could inject dependencies to your services, classes, or modules. With this, we are concluding the demo tutorial.
Looking to accelerate your career as a skilled Full Stack Web Developer? Leverage Caltech CTME's academic excellence in a unique bootcamp-style Post Graduate Program in Full Stack Web Development. Enroll Now!
Next Steps to Success
We hope that this Angular Dependency Injection tutorial helped you understand how to inject services into components and how multiple components can use a single piece of code. If you are looking to get advanced practical learning of Angular and perhaps make a career out of it, certification will come in handy.
Simplilearn's Post Graduate Program in Full Stack Web Development gives you an in-depth understanding of front-end web development with Angular. As part of this course, you will learn to create applications, including facilitating single-page web applications, components, dependency injection, and typescript. The course also includes a real-time project to test your skills and help you perfect them.
If you have feedback or questions on the topic, please drop us a comment in the comments section of this article. We will get back to you ASAP!
