JavaScript:
//x.component.html
[LIST]
<li *ngFor="let item of flickrOBJ">
[img]{{item.url_t}}[/img]
[/LIST]
<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));
}
}