Posts ngFor with service
Post
Cancel

ngFor with service

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

This post is licensed under CC BY 4.0 by the author.
Contents

Trending Tags