1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//x.component.html
* ![]()
<button type="button" (click)="callFlickr()">Get new images!</button>
//flickr.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/Rx';
@Injectable()
export class FlickrService {
constructor (private http: Http) {}
public getImages() {
return this.http.post("https://api.flickr.com/services/rest/?method=flickr.photos.getRecent&per_page=5&format=json&nojsoncallback=1&extras=url_t&api_key=0eb28a07a69f09f148ce289", "");
}
}
//x.component.ts
import { Component } from '@angular/core';
import { FlickrService } from './flickr.service';
export class AppComponent {
private flickrOBJ: any[] = []; // the ngFor tied with the array
constructor(private flickrService: FlickrService) { }
callFlickr() {
this.flickrService.getImages().subscribe((data) => {
console.log(JSON.parse(data['_body']).photos.photo);
this.flickrOBJ = (JSON.parse(data['_body']).photos.photo);
}, (err) => console.log("error occured", err));
}
}
origin - http://www.pipiscrew.com/?p=7420 ngfor-with-service