Posted on Jun 29, 2022

Angular Dependency Injection

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