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.