Series Calls

In angular we can make the series of server calls.


srcEx3
  src
     app
           services----->Folder Name
                 customers.service.ts
                 countries.service.ts
            components-------->folder Name 
                  series.component.ts
                  series.component.html

      app.module.ts
  index.html

--------------------------------------------------

customers.service.ts
------------------------

import { Injectable } from '@angular/core';

import { Http, Response } from "@angular/http"

import "rxjs/Rx";

import { Observable } from "rxjs/Observable";

@Injectable()

export class CustomersService {

  constructor(private _http: Http) { }

  public getCustomers() {

    return this._http.get("https://www.w3schools.com/angular/customers.php")

      .map((res: Response) => {

        return res.json();

      }).catch(this._handleError);

  }

  public _handleError(err) {

    console.error("error Raised" + err);

    return Observable.throw(err || "Internal Server Error");

  }

}

countries.service.ts
-----------------------

import { Injectable } from '@angular/core';
import { Http, Response } from "@angular/http";
import "rxjs/Rx";
import { Observable } from "rxjs/Observable";
@Injectable()
export class CountriesService {
constructor(private _http: Http) { }
public getCountries() {
return this._http.get("http://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");

}

}

series.component.ts
-----------------------

import { Component, OnInit } from '@angular/core';

import { CustomersService } from '../../services/customers.service';

import { CountriesService } from '../../services/countries.service';
import { HttpErrorResponse } from '@angular/common/http';

@Component({

selector: 'app-series',
templateUrl: './series.component.html',
styleUrls: ['./series.component.css']
})
export class SeriesComponent implements OnInit {
private result_one: any;
private result_two: any;
constructor(private _service_one: CustomersService,
private _service_two: CountriesService) { }
ngOnInit() {
this._service_one.getCustomers().subscribe(res => {
this.result_one = res;
this._service_two.getCountries().subscribe(res1 => {
this._service_two = res1;
}, (err: HttpErrorResponse) => {
if (err.error instanceof Error) {
console.log("Client Side error");
} else {
console.log("Server side error");
}
})

}, (err: HttpErrorResponse) => {

if (err.error instanceof Error) {

console.log("Client Side error");

} else {

console.log("Server side error");

}

})

}

}

series.component.html
---------------------------

<h3 style="color: red">{{result_two | json}}</h3>

<h3 style="color: blue">{{result_one |json}}</h3>

app.module.ts
-----------------

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SeriesComponent } from './components/series/series.component';
import { CustomersService } from "./services/customers.service";
import { CountriesService } from "./services/countries.service";
import { Http, HttpModule } from '@angular/http';

@NgModule({
declarations: [
AppComponent,
SeriesComponent
],

imports: [

BrowserModule, HttpModule
],
providers: [CustomersService, CountriesService],
bootstrap: [SeriesComponent]

})

export class AppModule { }