create services folder
ng g s services/countries
contries.service.ts
----------------------
//import Injectable
//Injectable class used to create the Custom Service
import { Injectable } from '@angular/core';
//import Http Class
//Http Class used to connect to server by using http protocol
//import Response
//"Response From Server" is the Response Type
import { Http,Response } from "@angular/http";
//import map(),catch()
//map() used to catch the positive Result
//catch() used to catch the Error Response
import "rxjs/Rx";
//import Observable
import { Observable } from "rxjs/Observable";
@Injectable()
export class CountriesService {
constructor(private _http:Http) { }
public getCountries():any{
return this._http.get("https://restcountries.eu/rest/v2/all")
.map((res:Response)=>{return res.json()})
.catch(this._handleError);
}
public _handleError(err){
console.error("Error Raised..."+err);
return Observable.throw(err || "Internal Server Error !");
}
}
if you get error in rxjs/Rx please install
npm install --save rxjs-compat@6 if you get error again another
npm i rxjs-compat
ng g c components/countries
service.component.ts
--------------------------
import { Component, OnInit } from '@angular/core';
import { CountriesService } from '../../services/countries.service';
import { HttpErrorResponse } from "@angular/common/http";
@Component({
selector: 'app-countries',
templateUrl: './countries.component.html',
styleUrls: ['./countries.component.css']
})
export class CountriesComponent implements OnInit {
private data: any;
constructor(private _service: CountriesService) { } //Dependency Injection
ngOnInit() {
this._service.getCountries().subscribe(res => this.data = res,
(err: HttpErrorResponse) => {
if (err.error instanceof Error) {
console.log("Client side Error");
} else {
console.log("Server Side Error");
}
});
}
}
countries.components.html
----------------------------------
<table border="1"
cellpadding="5px"
cellspacing="5px"
align="center"
style="font-size: 20px">
<thead style="background-color: gray">
<tr>
<th>Name</th>
<th>Capital</th>
<th>Flag</th>
<th>Currencies</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let x of data">
<td>{{x.name}}</td>
<td>{{x.capital}}</td>
<td><img width="100px" height="50px" src="{{x.flag}}"></td>
<td>{{x.currencies[0].code}}</td>
</tr>
</tbody>
</table>
app.module.ts
-----------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CountriesComponent } from './components/countries/countries.component';
import { CountriesService } from "./services/countries.service";
import { HttpModule } from "@angular/http";
@NgModule({
declarations: [
AppComponent,
CountriesComponent
],
imports: [
BrowserModule,
HttpModule
],
providers: [CountriesService],
bootstrap: [CountriesComponent]
})
export class AppModule { }
index.html
--------------
<body>
<app-countries></app-countries>
</body>
countries.components.spec.ts
------------------------------------
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CountriesComponent } from './countries.component';
describe('CountriesComponent', () => {
let component: CountriesComponent;
let fixture: ComponentFixture<CountriesComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CountriesComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CountriesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
