Qfyilyi

I am trying to consume the service from http://jsonplaceholder.typicode.com/posts in angular 2

My html is as under

employee-information-apps.html

--------------------------------

<button (click)="getDetails()" id="tbn1">Invoke Service</button>

app.ts

//our root app component

import {Component, NgModule} from '@angular/core'

import {BrowserModule} from '@angular/platform-browser'

import { HttpModule } from '@angular/http';



// Annotation section

@Component({

  selector: 'my-app',

  template: `

    <div style="width: 50%; margin: 0 auto;">     

      <employee-selector></employee-selector>

    </div>

  `,  

})

// Component controller

export class App { 

  constructor() { }

}



// Annotation section

@Component({

  selector: 'employee-selector',

  templateUrl: 'employee-information-apps.html'   

})



// Component controller

export class EmployeeInformation {



  http: Http;

  constructor(private _http: Http) {



    this.http = http;

    this.url='http://jsonplaceholder.typicode.com/posts';





  }//end constructor      



      getDetails(){



             return this._http.get(this.url)

                    .map((response: Response) => Console.log(response.json()))

                    .catch(this.handleError);   

    } //end getDetails



}



@NgModule({

  imports: [ BrowserModule ],

  declarations: [ App,EmployeeInformation ],

  bootstrap: [ App ]

})

export class AppModule {}

But I could not make this work.

What is the mistake that I am making?

You need to import HttpModulein your NgModule

Here in your app.ts

@NgModule({

  imports: [ 

     BrowserModule,

     HttpModule // <--- here!

  ],

  declarations: [ App,EmployeeInformation ],

  bootstrap: [ App ]

})

export class AppModule {}

And also, you are missing Http and Response import.

import {Http, Response} from '@angular/http';

Example Plunker

You never subscribed. The observer is "cold" until activated with a subscribe.

return this._http.get(this.url)

    .map((response: Response) => Console.log(response.json()))

    .subscribe(result => {

        // this.posts = result;

    })

    .catch(this.handleError);