Invoke a Service through Angular 2

Question

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?

Any error messages? I see you aren't subscribing to getDetails. Have a look at the official documentation. — brians69
– brians69, Commented Nov 13, 2016 at 0:57

Michael · Accepted Answer · 2016-11-13 02:09:19Z

1

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

edited Nov 13, 2016 at 2:09

answered Nov 13, 2016 at 1:25

Michael

1,7261 gold badge18 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Over a year ago

@priyanka.sarkar answer edited, you also need to import Http and Response

priyanka.sarkar Over a year ago

No..still error.. a demo in jsfiddle or plunker will be helpful so that i can figure out what is that i am missing..

Michael Over a year ago

@priyanka.sarkar Added plunker link

Mark Pieszak - Trilon.io · Accepted Answer · 2016-11-13 01:07:25Z

1

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);

answered Nov 13, 2016 at 1:07

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

2 Comments

Mark Pieszak - Trilon.io Over a year ago

Are you including http in your systemJS?

priyanka.sarkar Over a year ago

yes i am...would you mind to demo it in plunker so that i can figure out what is that i am missing

Collectives™ on Stack Overflow

Invoke a Service through Angular 2

app.ts

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.ts

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related