Angular 6 Dependency Injection Tutorial Example is the main topic. Dependency Injection (DI) is the way to create the objects that depend upon other objects. We generally use service as a Dependency Injection. Dependency injection is a vital application design pattern. Angular has its dependency injection framework, and you really can’t build an Angular application without it. In this example, we create a service that fetches the data from the server and then displays that data on the Angular Frontend.
Angular 6 Dependency Injection Tutorial
Okay, so first install Angular 6 application using Angular CLI.
#1: Install Angular 6.
Go to the terminal and type the following command.
npm install -g @angular/cli
Next step is to create a new Angular 6 Project using the following command.
ng new dependency
Go to the project folder.
cd dependency
#2: Create a service.
We can create a service using the following command.
ng g service data
#3: Create a JSON server.
We need the fake data to work with that is why I am using one package called json-server for this tutorial. Okay, so let us install the package using node package manager.
npm install -g json-server
Now next step is to create the new directory called data in the root. Inside that directory, create a file called db.json. Add the following data inside the db.json file.
{ "results": [ { "id": "1", "name": "Golum" }, { "id": "2", "name": "Ape" }, { "id": "3", "name": "King Kong" }, { "id": "4", "name": "Serkis" }, { "id": "5", "name": "Andy" }] }
Now, start the JSON server using the following command.
json-server --watch data/db.json --port 4000
Now, we can access the JSON data using json-server running.
Our JSON server is started at port: 4000 and URL is: http://localhost:4000/results
#4: Setup HttpClient.
In Angular, we can send a network request to the server via HttpClient API. It is native API provided by Angular. We can use to send a GET and POST request to a server. We can configure it inside app.module.ts.
// app.module.ts import { HttpClientModule } from '@angular/common/http'; imports: [ BrowserModule, RouterModule.forRoot(routes), HttpClientModule, ],
Now, inside app folder, create one file called Data.ts. It is an interface, that tells an Angular that what is the datatype of the backend data object.
// Data.ts export interface Data { id: Number; name: String; }
#5: Write the data.service.ts file.
Now, the data.service.ts file is the service file, so we can use this file as a dependency of the app.component.ts class and will inject it in that class. So now app.component.ts file can access the methods of a data.service.ts class.
We write the network request code inside a data.service.ts file. It provides the service that can access the API and fetch the data from the server.
// data.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class DataService { constructor(private http: HttpClient) { } url = 'http://localhost:4000'; getUsers() { return this .http .get(`${this.url}/results`); } }
Now, include this file inside an app.component.ts file.
// app.component.ts import { Component, OnInit } from '@angular/core'; import { DataService } from './data.service'; import { Data } from './Data'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { data: Data[]; constructor(private dataservice: DataService) { } ngOnInit() { this.dataservice .getUsers() .subscribe((data: Data[]) => { this.data = data; }); } }
So here, we have injected the DataService class as a dependency.
Loop through that data and display it as a table inside the app.component.html file.
<table> <thead> <tr> <th>ID</th> <th>Name</th> </tr> </thead> <tbody> <tr *ngFor="let value of data"> <td>{{ value.id }}</td> <td>{{ value.name }}</td> </tr> </tbody> </table>
So, we have successfully injected the Service DI and use it in the app.component.ts class.
Finally, Angular 6 Dependency Injection Tutorial is over.

Krunal Lathiya is an Information Technology Engineer by education and web developer by profession. He has worked with many back-end platforms, including Node.js, PHP, and Python. In addition, Krunal has excellent knowledge of cloud technologies including Google Cloud, Firebase, AWS, and Azure, and various softwares and tools.
After reading so many blogs finally got the solution. I’ve learning angular from last 2 months found Dependency injection quite difficult . But finally everything is clear to me. Thanks for the helpful post