import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpModule } from '@angular/http';
import { Http, Response} from '@angular/http';

import { AppComponent } from './app.component';
import { UserListComponent } from './user-list.component';
import {  UserDetailComponent } from './user-detail.component';
import { UserService } from './user.service';

@NgModule({
  declarations: [
    AppComponent,
    UserListComponent,
    UserDetailComponent
  ],

  imports: [ BrowserModule, HttpModule ],

  providers: [UserService],

  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',

  providers: [UserService]


})
export class AppComponent {
  title = '';
}

<user-detail></user-detail>

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
    selector: 'user-detail',
    template: `<h4>User Details</h4>'
                <ul *ngFor=" let user of users ">
                <li>username={{user.username}}-------password={{user.password}}</li>
                </ul>`
})

export class UserDetailComponent implements OnInit{
users = [];

constructor(private _userService:UserService){}
ngOnInit(){
this._userService.getUsers()
.subscribe(resUserData => this.users = resUserData);
}
}

import { Injectable } from '@angular/core';
import { Http, Response} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {
private _url: string = "http://localhost:4200/assets/apidata/userdata.json"
constructor(private _http: Http){}
    getUsers(){
    return this._http.get(this._url)
    .map((response:Response) => response.json() );
}}