Lesson 8 of 9By Kartik Menon
Last updated on Jan 7, 20211019Angular 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. In this tutorial on Angular Dependency Injection, we will cover the following topics.
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:
There are three types of Dependency Injections in Angular, they are as follows:
Now that you know what DI is, and its types, let’s look at its advantages.
Dependency injection offers some incredible advantages. Here are some of them
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.
As a result, we are not in control of the code, and here’s where Dependency Injection comes into the picture.
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.
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.
Enroll for the Angular Course and gain in-depth knowledge of concepts like TypeScript, Bootstrap Grid System, and more!
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 Angular Certification Training Course 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!
Kartik is an experienced content strategist and an accomplished technology marketing specialist passionate about designing engaging user experiences with integrated marketing and communication solutions.
30+ Top Angular Interview Questions With Answers
The Comprehensive Ethical Hacking Guide for Beginners
How to Learn Angular: Benefits of Angular and Certifications
Angular Hello World: Creating Your First Angular Application
Introduction To Angular Service and Its Features
A Guide on How to Become a Site Reliability Engineer (SRE)