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>
Top comments (0)