DEV Community

Bipon Biswas
Bipon Biswas

Posted on

1 1

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() { }
}
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';

@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();
  }

}
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

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>
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

<app-emp-info></app-emp-info>
Enter fullscreen mode Exit fullscreen mode

Employee list

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️