Angular 6 Dependency Injection Example

Today, We want to share with you Angular 6 Dependency Injection Example.In this post we will show you Introduction To Dependency Injection And Services In Angular 6, hear for Dependency Injection in Angular 6 with Example we will give you demo and example for implement.In this post, we will learn about angular 6 uses dependency injection horizontal with an example.

Angular 6 Dependency Injection Example

There are the Following The simple About Angular 6 Dependency Injection Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop Dependency Injection in Angular 6, so the some major files and Directory structures for this example is following below.

  • Simple Angular 6 Dependency Injection
  • Setup Angular 6 project.
  • Make an Angular 6 service.
  • Make an Angular 6 JSON server.
  • Setup HttpClient.
  • Last step Create data.service.ts file.

Step #1: Simple Setup Angular 6 in Angular CLI.

npm install -g @angular/cli

//Make a new Angular 6 Project
ng new dependency

//Go to An Angular 6 dependency Injection project folder.
cd dependency

step #2: Make an Angular 6 service.

ng g service data

Step #3: Make a JSON server.

Create a simple json-server

npm install -g json-server


//Simple JSON Angular 6 Dependency Injection Example
    "memberList": [
        "id": "1",
        "name": "Krunal"
        "id": "2",
        "name": "Jaydeep"
        "id": "3",
        "name": "ankit"
        "id": "4",
        "name": "Dhaval"
        "id": "5",
        "name": "Milan"

start the JSON server

json-server --watch data/db.json --port 4000

Step #4: Setup Angular 6 HttpClient.


// app.module.ts

import { HttpClientModule } from '@angular/common/http';

 imports: [

app >> Data.ts

// Data.ts

export interface Data {
    id: Number;
    name: String;

Step #5: Angular 6 Create data.service.ts file.


// data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

  providedIn: 'root'
export class DataService {

  constructor(private http: HttpClient) { }
  url = 'http://localhost:4000';
  getMembers() {
    return this


// app.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { Data } from './Data';

//Component Angular 6 Dependency Injection
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  data: Data[];
  constructor(private dataservice: DataService) { }

  ngOnInit() {
      .subscribe((data: Data[]) => {
 = data;


Source Code For Angular 6 Dependency Injection

The app.component.html

      <th>Member ID</th>
      <th>Member Name</th>
    <tr *ngFor="let mem of data">
      <td>{{ }}</td>
      <td>{{ }}</td>

Angular 6 CRUD Operations Application Tutorials

Read :


You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Angular 6 Dependency Injection Tutorial Example From Scratch.
I would like to have feedback on my blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Related FAQ

Here are some more FAQ related to this Article:

  1.   PHP Laravel 6 Flash Message Notification
  2.   Create dynamic calendar using jQuery, Ajax and PHP
  3.   Creating Laravel Web Installer Setup Wizard
  4.   PHP Laravel Charts and Graphs Data from Database
  5.   PHP Force File Download HTML button code
  6.   Retrieving URL Query String in PHP
  7.   PHP Resize Image Upload Example
  8.   Abstract Class in C# Tutorial with Example
  9.   Laravel Get Last 7 days month year record from MySQL
  10.   Laravel update multiple rows with different values