how to call http call in angular 2?

Question

could you please tell how to call http call in angular 2 and display data using ng-repeat ?

here is my code http://plnkr.co/edit/u6LXrvGuC6f3bOT1tsaZ?p=preview

import {Component,View} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {Router} from 'angular2/router';

@Component({

    templateUrl: 'home/home.html'
})


export class AppComponent {
   toDoModel;
  constructor(private _router:Router) {
   http.get('data.json')
      .map(res => res.json())

  }

  onclck(inputValue){
    alert(inputValue)
    this._router.navigate(['Second']);
  }

}

Community · Accepted Answer · 2017-05-23 12:17:43Z

3

First you need to inject an Http instance into you component:

export class AppComponent {
  toDoModel;

  constructor(private _router:Router,private http:Http) {
    this.http.get('data.json')
        .map(res => res.json())
  }
}

There are then two ways to display your data in an ngFor:

By subscribing on the observable returned by the get method

@Component({
  template: `
    <ul>
      <li *ngFor="#elt of elements">{{elt.name}}</li>
    </ul>
  `
})
export class AppComponent {
  toDoModel;

  constructor(private _router:Router,private http:Http) {
    this.http.get('data.json')
        .map(res => res.json())
        .subscribe(data => {
          this.elements = data;
        });
  }
}

By leveraging the async pipe

@Component({
  template: `
    <ul>
      <li *ngFor="#elt of elements | async">{{elt.name}}</li>
    </ul>
  `
})
export class AppComponent {
  toDoModel;

  constructor(private _router:Router,private http:Http) {
    this.elements = this.http.get('data.json')
        .map(res => res.json());
  }
}

Don't forget to specify HTTP_PROVIDERS when bootstrapping your application:

import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component';

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

Here is the corresponding plunkr: https://plnkr.co/edit/bdFeiiAqrPDtFUdguw7s?p=preview.

You could also put your HTTP processing into a dedicated service as described below:

How to Consume Http Component efficiently in a service in angular 2 beta?

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Feb 11, 2016 at 5:50

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

3 Comments

user944513 Over a year ago

please share plunker

Thierry Templier Over a year ago

Regarding your plunkr, you forgot to add the http.dev.js file in your HTML file and add import 'rxjs/add/operator/map'; in your script.js file. See this answer for more details: stackoverflow.com/questions/34515173/…

Mark Meuer Over a year ago

@ThierryTemplier Thank you! For me, subscribe was the key. I wasn't subscribing to the result because I didn't care about the result--I just wanted to fire and forget. But without the subscription, it never fires!

Pankaj Parkar · Accepted Answer · 2016-02-11 09:03:05Z

0

You need it "inject" Http in order to use it

constructor(private http: Http){
  http.get('https://...')
    .map(response  => { response.json(); })
    .subscribe(value => { this.data = value;})  
}

edited Feb 11, 2016 at 9:03

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Feb 11, 2016 at 5:47

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

1 Comment

Günter Zöchbauer Over a year ago

Injecting and importing are different things - you need both. See the constructor parameter.

Collectives™ on Stack Overflow

how to call http call in angular 2?

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related