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.
Read Also:  Multiple Database Connections using Laravel

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

<table>
  <thead>
    <tr>
      <th>Member ID</th>
      <th>Member Name</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let mem of data">
      <td>{{ mem.id }}</td>
      <td>{{ mem.name }}</td>
    </tr>
  </tbody>
</table>

Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  Form Input Fields Validation using Angular Example

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Laravel 5.7 database Multiple seeder Example
  2. Read Also:  How to Create, Access and Destroy Sessions in Laravel
  3. Read Also:  angular Recursive Templates Dynamic nested Tree
  4. Read Also:  hasproperty in javascript - How to Check If an Object Has a Property in JavaScript?
  5. Read Also:  Ajax Login System with jQuery PHP and MySQLi
  6. Read Also:  jquery $.inArray Method with Example
  7. Read Also:  Form Submission With Validation Using Vue.JS and PHP
  8. Read Also:  Multiple Database Connections using Laravel
  9. Read Also:  Laravel 5.7 database Multiple seeder Example
  10. Read Also:  How to Create, Access and Destroy Sessions in Laravel
CLOSEX