Angular 2 CRUD in Angular2 with Restful API Read from an Restful API in Angular2
Example
To separate API logic from the component, we are creating the API client as a separate class. This example class makes a request to Wikipedia API to get random wiki articles.
import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
@Injectable()
export class WikipediaService{
constructor(private http: Http) {}
getRandomArticles(numberOfArticles: number)
{
var request = this.http.get("https://en.wikipedia.org/w/api.php?action=query&list=random&format=json&rnlimit=" + numberOfArticles);
return request.map((response: Response) => {
return response.json();
},(error) => {
console.log(error);
//your want to implement your own error handling here.
});
}
}
And have a component to consume our new API client.
import { Component, OnInit } from '@angular/core';
import { WikipediaService } from './wikipedia.Service';
@Component({
selector: 'wikipedia',
templateUrl: 'wikipedia.component.html'
})
export class WikipediaComponent implements OnInit {
constructor(private wikiService: WikipediaService) { }
private articles: any[] = null;
ngOnInit() {
var request = this.wikiService.getRandomArticles(5);
request.subscribe((res) => {
this.articles = res.query.random;
});
}
}
