DEV Community

Bipon Biswas
Bipon Biswas

Posted on

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


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

  providedIn: 'root'
export class RecordsService {

  info1: string[] = ["John Doe", "E234", ""]
  info2: string[] = ["Simon Gomez", "E321", ""]
  info3: string[] = ["Bipon Biswas", "E123", ""]

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

  constructor() { }
Enter fullscreen mode Exit fullscreen mode

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

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

  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 {

    this.infoReceived1 = this.rservice.getInfo1();
    this.infoReceived2 = this.rservice.getInfo2();
    this.infoReceived3 = this.rservice.getInfo3();

Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode


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

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

<button type="button" name="button" (click)="getInfoFromServiceClass3()">Employee3</button>
    <li *ngFor="let info of infoReceived3" class="list-group-item">{{info}}</li>
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Employee list

Top comments (0)