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

Contents

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

db.json

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

// app.module.ts

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

 imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    HttpClientModule,
],

app >> Data.ts

// Data.ts

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

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

data.service.ts

// 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';
  getMembers() {
    return this
            .http
            .get(`${this.url}/memberList`);
        }
}

app.component.ts

// app.component.ts

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

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

  ngOnInit() {
    this.dataservice
      .getMembers()
      .subscribe((data: Data[]) => {
          this.data = data;
        });
  }

}

Source Code For Angular 6 Dependency Injection

The app.component.html


  
    
      Member ID
      Member Name
    
  
  
    
      {{ mem.id }}
      {{ mem.name }}

Member ID	Member Name
{{ mem.id }}	{{ mem.name }}

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

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 Pakainfo.com 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.