Angular Dependency Injection
Tags: angular, dependency, injection
Published: 2022-06-29 15:44:27

---
title: Angular Dependency Injection
published: true
description: Angular Dependency Injection
tags: angular, dependency, injection
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

**Objective:** In this article, you will know dependency injection concept, custom dependency injection in Angular.

**Pre-requisite** Prior to completing this article, you should have already installed all pre-requisite tooling including: Visual Studio Code, Node Package Manager (NPM), Node, Angular CLI.

### Dependency Injection
Consider all these components performing common task like accessing the database, rendering images on the view etc.
- to avoid rewriting of code, Angular Service can be used
- these service can then **injected** into the components that require that service 
- Dependency Injection or DI keeps the code flexible, testable and mutable 
- Classes can inherit external logic without knowing how to create it
- DI is benefits directive, pipes and components

Normally, components are used to ensure a good user experience. 
- In order to execute tasks, using **Service** is ideal. 
- A component can delegate tasks like fetching data from the server, validating user input, or logging directly to the console to the Service. 

**Use Case**
- Create a Service that performs the task of displaying an employee list
- Inject the service into the class using Dependency Injection

At first create a component `ng g c emp_info`

Next create a service `ng g s records`

**records.service.ts**

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

@Injectable({
  providedIn: 'root'
})
export class RecordsService {

  info1: string[] = ["John Doe", "E234", "john@gmail.com"]
  info2: string[] = ["Simon Gomez", "E321", "simon@gmail.com"]
  info3: string[] = ["Bipon Biswas", "E123", "bipon@gmail.com"]

  getInfo1(): string[]{
    return this.info1;
  }
  getInfo2(): string[]{
    return this.info2;
  }
  getInfo3(): string[]{
    return this.info3;
  }

  constructor() { }
}
```

Let's go back to our component .ts file **emp-info.component.ts**

```
import { Component, OnInit } from '@angular/core';
import { RecordsService } from '../records.service';

@Component({
  selector: 'app-emp-info',
  templateUrl: './emp-info.component.html',
  styleUrls: ['./emp-info.component.css'],
  providers: [RecordsService]
})
export class EmpInfoComponent implements OnInit {

  infoReceived1: string[] = [];
  infoReceived2: string[] = [];
  infoReceived3: string[] = [];

  constructor(private rservice: RecordsService) { }

  ngOnInit(): void {
  }

  getInfoFromServiceClass1(){
    this.infoReceived1 = this.rservice.getInfo1();
  }
  getInfoFromServiceClass2(){
    this.infoReceived2 = this.rservice.getInfo2();
  }
  getInfoFromServiceClass3(){
    this.infoReceived3 = this.rservice.getInfo3();
  }

}
```
Service are implemented with the help of Dependancy Injection. 

What we need to do. At first import the Service into the **emp-info.component.ts** file. 

Import Service 

```
import { RecordsService } from '../records.service';
```

**emp-info.component.html**

```
<button type="button" name="button" (click)="getInfoFromServiceClass1()">Employee1</button>
<ul>
    <li *ngFor="let info of infoReceived1" class="list-group-item">{{info}}</li>
</ul>

<button type="button" name="button" (click)="getInfoFromServiceClass2()">Employee2</button>
<ul>
    <li *ngFor="let info of infoReceived2" class="list-group-item">{{info}}</li>
</ul>

<button type="button" name="button" (click)="getInfoFromServiceClass3()">Employee3</button>
<ul>
    <li *ngFor="let info of infoReceived3" class="list-group-item">{{info}}</li>
</ul>
```
Create a three different button for different employees. And user click on the button the data is showing in the UI.

Import into **app.component.html**
```
<app-emp-info></app-emp-info>
``` 

![Employee list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ereobnrolayr6esqkjg.png)